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
Related
Knowing both is used as a hint for mobile browsers, I couldn't find a real doc about the difference between using <input type="tel"> and <input inputmode="tel">. So
what's the difference?
which is better to use?
why duplication if it's the same?
The MDN doc suggests using the type. But it's still unclear on the explaination.
If you want only show the "phone keys" like 0 to 9 and * and #, use
<input inputmode="tel">
If you want to show a form field with regular keyboard, use
<input type="tel">
Also see "Everything You Ever Wanted to Know About inputmode".
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>
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.
I've had a quick look and couldn't find what I needed. I expect it to be something simple. I have an input text box whose type is set to a number with range between 1 to 20. This works perfectly.
However, the user can just type in abc or 21, which defeats the point. How can I set it so that the text box doesn't allow that?
maybe you can use "pattern"
<input type="text" pattern="[0-9]+" />
input type="number" and "range" not supported in Firefox.
You might want to solve using javascript, or, if it is only a matter of 20 numbers (ie 1-20), why not use a drop down?
such as:
<select>
<option>1</option>
</option>
etc...
HTML5 has a 'number' type input element. It looks like this:
<input type="number" name="quantity" min="1" max="5">
You can see it in action here: http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_number
However, not every browser supports this, so you you may need to validate the input given by the user. This page will tell you which browsers support this feature:
http://www.w3schools.com/html/html5_form_input_types.asp
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.