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
Hi,
there'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
which plugin you are using to show code on blog?
and 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 :)
Useful plugin, maybe someone need mandatory fields (ex. Alternate Email), when user fill something the validate is able, whether not disabled. Thanks!
Your length validation method isn't required. Just by adding a maxlength attribute to the inputs is enough....
it isn't work on IE6 , can you introduce me to fix it ?
thank a lot.... I`ll use your CSS, it`s fun...
Thank you srinu for sharing nice code ...
Thanks, really useful ...
Hi 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
hello,
how can i solve, when i fill a name with space in text field ?
To fix the space issue, please use jQuery.trim()
http://api.jquery.com/jQuery.trim/
Thanks.
very good information i definitely use your css it is really enjoyable for me to use it.
superb. just what I was looking for. Couldn't get my custom validation to work, now they do. Thanks.
realy good