html5 pattern validation

 

html5 pattern is a best feature that will help you to avoid long coding for form validation. It is used to check the possible value that will be wanted to insert by visitor. You can able to validate each field as per your you need such as for name, phone number, email and for alphanumeric value and so on.
html5 pattern validation for alphabets only, so we need to add below code in your form element.

Pattern Validation for Name

 
    pattern="[a-zA-Z]+"
    

Below is the example of the pattern validation for form input element

Example

  <input type="text" id="name" placeholder="Name" pattern="[a-zA-Z\s]+" />

In the above code only you can able to insert alphabets but it will not take space. But sometimes you need to add space for first name and last name on that time it will not work for that condition.
So for that case, you need to add this below pattern matching code for input fields.

Pattern Validation for Name with Space

 
    pattern="[a-zA-Z\s]+"
    

html5 pattern validation for number only, so we need to add below code in your form element.

Pattern Validation for Phone Number Field

 
    pattern="[0-9]{10}"
    

In the above code, user can enter the number only, alphabet will not allowed. And we have also mentioned {10} that means the user can able to enter 10 digit number only. It is basically used for phone number field validation.