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.
Read also : BootStrap Signup Form with jQuery Validation
Read also : Parsley Form Validation Example
Read also : Server Side Form Validation Example using PHP
NOTE : title attribute must be used in the
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.
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
- 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="[email protected]" 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 : ([email protected])*</label>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="[email protected]" 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.
goooood one...
ReplyDeleteNice post
ReplyDeleteNice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.
ReplyDeleteParabéns pelo tutorial, consegui entender perfeitamente mesmo compreendendo muito pouco inglês!
ReplyDeletePhone Number
ReplyDeletepattern="^\d{10}$" accepts only numeric values with 10 digit. no working in google chrome...
do you have checked it in chrome...????
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
DeleteDear 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.
ReplyDeletethanks for such great and amazing tutirial.
adil rasheed
Hello Adil,
Deletethanks for such a nice comment & do visit again:)
simple and powerful HTML5 Validations... great stuff
ReplyDeletethanks charles ... sorry for the late reply :)
Deletetop staff
ReplyDeleteit's awesome love it
ReplyDeleteThanks a lot dear Pradeep..Really all tutorials are awesome...
ReplyDeletethank you, abdul :)
DeleteHi, 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.
ReplyDeletethanks PRADEEP KHODKE
ReplyDelete