I have to validate input text field as a phone number field. To do that I'am going to use HTML5 validation.
I already wrote code like this:
<input maxlength="8" type="text" name="phone" required />
I used required to validate this form. But how to validate this for Enter only digits and 8 digits.
<input maxlength="8" pattern="\d{8}" type="tel" name="phone" required />
Use pattern.
<input type="text" pattern="\d{8}" />
\d is the regular expression for a number.
type="number" for better semantic meaning as anyways you are using pattern to validate
type="number" as opposed to type="tel" which is semantically specific to phone numbers?
type="number" for a telephone number is wrong, and it violates the recommendation of the very drafts that define type="number" in the first place.You can set the Type="tel" but this not validates everything. You can use the pattern attribute with an regex.
The input-patter support:
Pattern Support Firefox 4+ & Chrome 5+ & Opera 9.6+ & MSIE 10+
For example:
<input type="tel" pattern="[0-9]*([-]?[0-9]+)*" >
For the 8 diggets you can use the maxlength="8"
