This time I want to explain about "Form validation using regular expressions with jquery". I had developed a tutorial using jquery.validate plugin, It's very simple. Implement this and enrich your web projects. Take a look at live demo
Download Script 
Live DemoBook : jQuery: Visual QuickStart Guide
Javascript code
More details about regular expressions. Take a look at this tutorial
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$.validator.addMethod("email", function(value, element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address.");
$.validator.addMethod("username",function(value,element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value);
},"Username are 3-15 characters");
$.validator.addMethod("password",function(value,element)
{
return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
},"Passwords are 6-16 characters");
// Validate signup form
$("#signup").validate({
rules: {
email: "required email",
username: "required username",
password: "required password",
},
});
});
</script>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$.validator.addMethod("email", function(value, element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,5}$/i.test(value);
}, "Please enter a valid email address.");
$.validator.addMethod("username",function(value,element)
{
return this.optional(element) || /^[a-zA-Z0-9._-]{3,16}$/i.test(value);
},"Username are 3-15 characters");
$.validator.addMethod("password",function(value,element)
{
return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{6,16}$/i.test(value);
},"Passwords are 6-16 characters");
// Validate signup form
$("#signup").validate({
rules: {
email: "required email",
username: "required username",
password: "required password",
},
});
});
</script>
HTML code
Contains simple HTML code.
<form method="post" action="thank.html" name="signup" id="signup">
Email<br />
<input type="text" name="email" id='email'/><br />
UserName<br />
<input type="text" name="username" id="username" /><br />
Password<br />
<input type="password" name="password" id="password" /><br />
<input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/>
</form>
Email<br />
<input type="text" name="email" id='email'/><br />
UserName<br />
<input type="text" name="username" id="username" /><br />
Password<br />
<input type="password" name="password" id="password" /><br />
<input type="submit" value=" Sign-UP " name='SUBMIT' id="SUBMIT"/>
</form>
CSS code
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
input
{
width:220px;
height:25px;
font-size:13px;
margin-bottom:10px;
border:solid 1px #333333;
}
label.error
{
font-size:11px;
background-color:#cc0000;
color:#FFFFFF;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
Book :jQuery Cookbook (Animal Guide){
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
input
{
width:220px;
height:25px;
font-size:13px;
margin-bottom:10px;
border:solid 1px #333333;
}
label.error
{
font-size:11px;
background-color:#cc0000;
color:#FFFFFF;
padding:3px;
margin-left:5px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
No matter looking for PHP tutorials or want to learn jQuery validate plugins for your web project, using our testking 1Y0-A17 live demos and testking PMI-001 study guides you can become expert in days. Join the testking 70-646 online training to learn best tips and techniques in web designing.
Dirty but very useful
ReplyDeleteHi,
ReplyDeletethere's a bug with the validation for user name.
try typing " hhh" (3 spaces before hhh without the quotes.)
thanks srinivas for sharing the things
ReplyDeletewhich plugin you are using to show code on blog?
ReplyDeleteand please write a post about setting-up blogger on your custom domain.
Thanx for sharing this validation script. its very useful and time shavy.
nice script thanks :)
ReplyDeleteUseful plugin, maybe someone need mandatory fields (ex. Alternate Email), when user fill something the validate is able, whether not disabled. Thanks!
ReplyDeleteYour length validation method isn't required. Just by adding a maxlength attribute to the inputs is enough....
ReplyDeleteit isn't work on IE6 , can you introduce me to fix it ?
ReplyDeletethank a lot.... I`ll use your CSS, it`s fun...
ReplyDeleteThank you srinu for sharing nice code ...
ReplyDeleteThanks, really useful ...
ReplyDeleteHi all I have changed a small application to work without the plug-in validation, as well as the registration form Srinivas Tamada, you can get a preview of the application here: http://www.getvay.com/Jquery_validacion / index.html and can be downloaded from here: http://www.getvay.com/pg/file/macs1407/read/1748/validacion-y-registro
ReplyDeletehello,
ReplyDeletehow can i solve, when i fill a name with space in text field ?
To fix the space issue, please use jQuery.trim()
ReplyDeletehttp://api.jquery.com/jQuery.trim/
Thanks.
very good information i definitely use your css it is really enjoyable for me to use it.
ReplyDeletesuperb. just what I was looking for. Couldn't get my custom validation to work, now they do. Thanks.
ReplyDeleterealy good
ReplyDeleteWhat if the field is not required but needs validation if the field is not empty. I can't get that to work except for making a rule for it as required.
ReplyDeleteWould Like to add password confirmation
ReplyDeletePassword [*****]
Confirm [*****]
I normally write my own validation, so thanks for this article, was interesting and worth the read.
ReplyDeletecan we use name for validation instead of id which will be in the cases of radio buttons checkboxes and listbox
ReplyDeletehi is there any regular exp format for accepting only alphanumeric not only numeric in user name
ReplyDeletehi im new to jquery plz tel me how to validate to combo box in this plugin...
ReplyDeletegreat .. terima kasih :)
ReplyDeleteVery helpful thanks
ReplyDelete