Sunday, 22 July 2018

Input type pattern





Form tag is one of the key tags of HTML through which users data are sent on server. While making a form there are lots of validation implemented to allow valid data only. As a developer we all know about importance of validation and we do lots of JS code for validation. Working with JS is not an easy task for beginner.

HTML 5 introduce built in validation using regular expression using pattern property. If you are using patter regular expression then this will save your time and it is supported by all model browsers. So using pattern, you do not to worry about browser compatibility.

Following code will help you to understand basics of pattern. Ones you will implement basics then after using regular expression you will be able to implement complicated validation rule.

Name :

Six Digit Pin :

Email :





<html>

<head>
     <title>Girfa : Input Pattern</title>
</head>
<body>
<form>
     Name : <input type="text" pattern="[A-Za-z]{10}" title="Name (MAX-10 character only)" placeholder="Name (MAX-10 character only)" /><br /><br />
     Six Digit Pin :
     <input type="text" pattern="[0-9]{6}" placeholder="Six digit pin" title="Only six digit number is allowed" required /><br /><br />
     Email : <input type="email" title="Invalid email address" placeholder="Email" /><br /><br />
     <input type="submit" value="Submit" />
</form>
</body>
</html>

Allow Alphabet only


<input id="txtName" type="text" placeholder="नाम " class="form-control" required pattern="^[A-Za-z -]+$">