HTML5 Form Validations with Pattern Matching | Coding Cage

HTML5 Form Validations with Pattern Matching

By
This is another Client Side Validation method No JavaScript or jQuery needed, Thanks to HTML5 because validations can now be done using HTML5 without coding of javascript or any server side language, using HTML5 you can validate forms with pattern, Forms must be validate either using client side or server side because it helps you to collect correct data or valid form values from the users, you cannot trust users blindly, let’s see it.
HTML5 Form Validation with Pattern Matching
 
Read also : BootStrap Signup Form with jQuery Validation
Read also : Parsley Form Validation Example
Read also : Server Side Form Validation Example using PHP

we will see the following.

  • letters only
  • numbers only
  • email
  • password
  • URL
  • phone no
  • alphanumeric

NOTE : title attribute must be used in the <input> tags which helps users to know whats to input.

letters :

pattern="[A-Za-z]+" accepts only capital or small letters.

<form>
<input type="text" pattern="[A-Za-z]+" title="letters only" required />
<input type="submit" />
</form>

numbers :

pattern="[0-9]+" accepts only numbers 0, 1, 2....

<form>
<input type="text" pattern="[0-9]+" title="only letters" required />
<input type="submit" />
</form>

E-mail :

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" accepts valid email address

<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]).{8,}" accepts one number one upper and lower case letters with 8 or more chars.

<form>
<input type="password" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required />
<input type="submit" />
</form>

URL :

pattern="https?://.+" required title="http://cleartuts.blogspot.com" accepts valid web url starting with http://.

<form>
<input type="url" name="website" pattern="https?://.+" required title="http://cleartuts.blogspot.com" />
<input type="submit" />
</form>

Phone no :

pattern="^\d{10}$" accepts only numeric values with 10 digit.

<form>
<input type="tel" pattern="^\d{10}$" title="10 numeric characters only" required />
<input type="submit" />
</form>

alpha numeric:

pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" accepts alphanumeric values letters and digits.

<form>
<input type="text" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" title="alphanumeric 6 to 12 chars" />
<input type="submit" />
</form>

stylify validations using pseudo classes of css3

using pseudo css3 classes you can change colors.

input:invalid{
    border:solid 2px #F5192F;
}
input:valid{
    border:solid 2px #18E109;
    background-color:#fff;
}

full script


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Form Validations with Pattern Matching</title>
<style type="text/css">
div
{
 line-height:15px;
}
input:valid
{
 border:solid green 1px;
}
input:invalid 
{
    border:1px solid red; 
}
input:required 
{
    border:1px solid #00a2d1; 
}
input
{
 width:200px;
 height:25px;
}


</style>
</head>

<body>
<form method="post">
<pre>
<div>
<label>Name : (letters only)*</label>
<input type="text" pattern="[A-Za-z]+" title="only letters" required />
</div>

<div>
<label>E-mail : (xyz@zyx.com)*</label>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="xyz@something.com" required />
</div>

<div>
<label>website : (http://cleartuts.blogspot.com)*</label>
<input type="url"  pattern="https?://.+" title="http://cleartuts.blogspot.com" required />
</div>

<div>
<label>pin code : (numbers only)</label>
<input type="text" pattern="[0-9]+" title="numbers only" required />
</div>

<div>
<label>password : (at least 6 chars)</label>
<input type="password" pattern=".{6,}" title="Six or more characters" required />
</div>

<div>
<label>phone no : (10 chars)</label>
<input type="tel" pattern="^\d{10}$" title="10 numeric characters only" required />
</div>

<input type="submit">
</pre>
</form>
</body>
</html>

that's it, how you can use HTML5 form validations with pattern matching using regular expressions , however server side validations is also necessary whenever needed.



16 comments:

  1. Nice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.

    ReplyDelete
  2. Parabéns pelo tutorial, consegui entender perfeitamente mesmo compreendendo muito pouco inglês!

    ReplyDelete
  3. Phone Number

    pattern="^\d{10}$" accepts only numeric values with 10 digit. no working in google chrome...

    do you have checked it in chrome...????

    ReplyDelete
    Replies
    1. Hello Askar, i have checked it in chrome it's working for numeric values but only 10 digits you have to use new attribute as maxlength="10" in input tag

      Delete
  4. Dear Pradeep your posts are great.I accept rarely the mastery of any one but watching yor posts I accepted you my teacher because you have taught scripts in so easy way that none other can do.
    thanks for such great and amazing tutirial.
    adil rasheed

    ReplyDelete
    Replies
    1. Hello Adil,
      thanks for such a nice comment & do visit again:)

      Delete
  5. simple and powerful HTML5 Validations... great stuff

    ReplyDelete
    Replies
    1. thanks charles ... sorry for the late reply :)

      Delete
  6. Thanks a lot dear Pradeep..Really all tutorials are awesome...

    ReplyDelete
  7. Hi, I need the user to input in alphanumeric way only like K23, J24, F67 . i.e. first letter is a alphabet and last two are digits.

    ReplyDelete