HTML5 Form Validations with Pattern Matching
HTML5 Form validation is another type of client side validation . In HTML5 validation no javascript or jquery needed. Using HTML5 we can validate form with pattern.
Different type of Pattern Matching in HTML5
- Letter only
- Number only
- Password
- Phone no
- Alphanumeric
- URL
Letters Only
pattern=”[A-Za-z]+” accepts only capital or small letters.
|
1 2 3 4 |
<form> <input type="text" pattern="[A-Za-z]+" title="letters only" required /> <input type="submit" /> </form> |
Number only
pattern=”[0-9]+” accepts only numbers 0, 1, 2….
|
1 2 3 4 |
<form> <input type="text" pattern="[0-9]+" title="only numbers" required /> <input type="submit" /> </form> |
Email
pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$” accepts valid email address
|
1 2 3 4 |
<form> <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$" title="xyz@something.com" required /> <input type="submit" /> </form> |
Password
pattern=”(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}” accept at least one number and one uppercase and lowercase letter, and at least 6 or more characters
|
1 2 3 4 |
<form> <input type="password" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" title="at least one number and one uppercase and lowercase letter, and at least 6 or more characters" required /> <input type="submit" /> </form> |
Phone no
pattern=”[0-9]{10}” accepts only numeric values with 10 digit.
|
1 2 3 4 |
<form> <input type="tel" pattern="[0-9]{10}" title="10 numeric characters only" required /> <input type="submit" /> </form> |
Alphanumeric
pattern=”^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$” accepts alphanumeric values letters and digits.
|
1 2 3 4 |
<form> <input type="text" pattern="^[a-zA-Z][a-zA-Z0-9-_.]{5,12}$" title="alphanumeric 6 to 12 chars" /> <input type="submit" /> </form> |
URL
pattern=”https?://.+” required title=”http://phpgurukul.com” accepts valid web url starting with http://.
|
1 2 3 4 |
<form> <input type="url" name="website" pattern="https?://.+" required title="http://phpgurukul.com" /> <input type="submit" /> </form> |
