Number pattern and max length are not working on IE.
I have tried variations of the below HTML, though IE appears to bypass that validation.
<input id="phone" maxlength="10" minlength="10" pattern="[0-9.]+" type="text">
Any suggestions on enforcing the above on IE?
The goal is to only allow 10-digits for that input field.
You can use an <input type="tel"> element, but it actually allows you to enter any characters. So, ultimately you need to specify a pattern and be very explicit as to what you are looking for and rely on HTML5 form validation. For example, if you are trying to input a phone number of the format 999.999.9999, then you want a something like the following. If you enter something that does not match the pattern and try to submit the form by hitting enter, you will get an error indication. Of course, use whatever pattern you want. If you just want digits and decimal points in any order (why?) but they must be length 10, then use pattern="[0-9.]{10}".
<form>
<input type="tel" pattern="[0-9]{3}\.[0-9]{3}\.[0-9]{4}" required>
</form>
Related
So I'm trying to make a form for my assignment, and I am using the pattern attribute in html so only certain characters are required to be typed on the text box. But for some reason, the form is saying using that I'm using an incorrect format even though I made my pattern attribute that way.
Here's an example of the code and a picture of the problem.
<form>
<label for="mnumber">Mobile Number:</label>
<input type="text" required id="mnumber" pattern="[0-9]"><br><br>
<input type="submit" value="submit">
</form>
You did write:
pattern="[0-9]"
You are asking for only one number. You just forget to add '+' to accept more than one number. I guess what you are searching for is this:
pattern="[0-9]+"
pattern="[0-9]"
allows for only a single number character to validate (and be submitted). If you want to allow more than one character, here's your options:
One or more numbers:
pattern="[0-9]+"
Zero or more numbers:
pattern="[0-9]*"
One to three numbers:
pattern="[0-9]{1,3}"
you just need to change type="text" to type="number"
Say I have the following HTML:
<form>
Fax #: <input type="number" name="fax" minlength="10" required />
<button>Print</button>
</form>
If I enter in "11" as the Fax # and hit "Print" the form submits without issue. I would like it to present some sort of error. If the minlength attribute doesn't do that then what exactly does the minlength attribute do?
I'm using Google Chrome 74..
The minlength attribute doesn't apply for input of type number. This is actually quite reasonable. Numbers don't have a length, text do. For reference, see The official documentation.
Using input type="number" for a fax field is semantically incorrect, anyway. You should use input type="text". Then you can limit its length by the maxlength or minlength attributes or even use the pattern one.
If you absolutely need to use number as input type and you need to limit the value to 10 digits, you can do it by using min and max attributes:
Fax #: <input type="number" name="fax" min="1000000000" max="9999999999" required />
Like I said, though, this is absolutely incorrect semantically.
Just trying to make a field that only accepts 8-digit numbers and every browser lets it pass with any number of digits.
<form>
<input type="number" pattern="[0-9]{8}" required>
<input type="submit">
</form>
I feel like I'm missing something really obvious here am not seeing the problem with my pattern.
Codepen: https://codepen.io/mavelo/pen/VVZvoP
<input type="number"> elements do not support use of the pattern attribute for making entered values conform to a specific regex pattern.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Pattern_validation
I have a form that takes phone number as input in a field
I have set the type as tel as per HTML5 standard. I need the input to accept either 8 digit or 10 digit values.
I tried
<input type='tel' placeholder='0123456789 or 12345678'></input>
i also tried adding pattern="[0-9]{8} or [0-9]{10}
but, did not work,
is there an other way
Its not the pattern I would recommend for telephone numbers but this should do as you ask:
pattern='[0-9]{8,10}'
<input type='tel' pattern='[0-9]{8}([0-9]{2})?' title='Phone Number (8 or 10 numbers)' />
First of all, I advise you currently do not use "tel" as the input type. The reason for this is that it is not yet supported by all the major browser providers. It might be suitable for say Google Chrome, but other browsers such as IE aren't able to support this input type yet. I personally stick to keeping the type as text for input on telephone numbers.
Secondly, the way you can limit the persons input amount is using the maxlength attribute.
<input type="text" maxlength="10"/>
Finally, the input tag is self closing. It's used in the format below:
<input />
Not:
<input></input>
Hope this helped. For more, look here: http://www.w3schools.com/tags/att_input_maxlength.asp
Change your input tag to this;
<input type="text" min="8" max="10" />
Found it myself guys
it was to be done with pattern attribute itself
<input type='tel' placeholder='0123456789' pattern='[0-9]{8}|[0-9]{10}'>
here '|' is the or in expression, thank guys however.
pattern='[0-9]{8}|[0-9]{10}'
resolved my problem
I tried the <input type="number" /> but on Opera that outputs a strange input box coupled with an "up and down" handler. What I expected was a regular text field that once you focus on it prompts the number keyboard instead of the alphabets. Is that even possible?
p.s. I'm not trying to validate. It would be a nice user experience, that's all.
Use pattern="[0-9]*"
Example number input: <input type="number" pattern="[0-9]*" />
Example phone input: <input type="tel" pattern="[0-9]*" />
Note: Browsers that do not support type="tel" will default to a text type
Beware: Using type="number" can cause problems with some browsers and user experience for credit card, postal code, and telephone inputs where a user might need to enter punctuation or a comma being in the output.
References:
http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
The official HTML5 way to handle phone numbers is:
<input type="tel">
You may not have liked the "strange input box" you got with Opera when you used<input type="number" />, but that really is the appropriate type of input area when you want to require visitors to enter a numeric value.
type="number" is HTML5 and many phones do not support HTML5.
For call link you can use type="tel" or
Special A.
You should look at CSS WAP extensions (page 56) too.
EDIT 10/2015:
Most if not ALL smart phones support HTML5 and CSS3, so type="number" is the best way.
This post is now invalid. All smartphones support HTML5 and CSS3 now, so adding type="number" does in fact prompt the number pad to pop-up. I just checked it on 2 different Android versions, and an iPhone. Just so no one in the future tries WAP instead of the correct HTML5 format.
This will work on mobile and will prevent the letter "e" (along with all other letters) from being allowed to be typed in in the desktop version of your page. type="number" by itself still normally allows "e" per spec:
<input pattern="[0-9]*" type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">
If you use type="number" in the above, then if you type "123" then "e" the oninput JS will replace all contents of the box. Just use type="text" if you really just want integer values.
You can control the style of keyboard that comes up on input focus, independently of the input type, with the HTML attribute inputmode. What you're probably looking for is inputmode="numeric", which shows a number pad with 0-9. There are other options, such as a number pad with # and *. See the docs linked below.
This is ideal for uses cases where type="number" would not work, such as numbers formatted with dashes.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
Try <input type="number" pattern="/d*">
OR
<input type="tel" pattern="/d*">
This will help if you working with Android.