Jquery Validation with Regular Expressions.
Wall Script
Follow Me:
Monday, January 04, 2010

Jquery Validation with Regular Expressions.

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

Jquery Validation with Regular Expressions.

Download Script     Live Demo

Book : 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>



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>

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)


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.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


25 comments:

  1. Hi,

    there's a bug with the validation for user name.

    try typing " hhh" (3 spaces before hhh without the quotes.)

    ReplyDelete
  2. thanks srinivas for sharing the things

    ReplyDelete
  3. 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.

    ReplyDelete
  4. Useful plugin, maybe someone need mandatory fields (ex. Alternate Email), when user fill something the validate is able, whether not disabled. Thanks!

    ReplyDelete
  5. Your length validation method isn't required. Just by adding a maxlength attribute to the inputs is enough....

    ReplyDelete
  6. it isn't work on IE6 , can you introduce me to fix it ?

    ReplyDelete
  7. thank a lot.... I`ll use your CSS, it`s fun...

    ReplyDelete
  8. Thank you srinu for sharing nice code ...

    ReplyDelete
  9. 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

    ReplyDelete
  10. hello,

    how can i solve, when i fill a name with space in text field ?

    ReplyDelete
  11. To fix the space issue, please use jQuery.trim()
    http://api.jquery.com/jQuery.trim/

    Thanks.

    ReplyDelete
  12. very good information i definitely use your css it is really enjoyable for me to use it.

    ReplyDelete
  13. superb. just what I was looking for. Couldn't get my custom validation to work, now they do. Thanks.

    ReplyDelete
  14. What 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.

    ReplyDelete
  15. Would Like to add password confirmation

    Password [*****]
    Confirm [*****]

    ReplyDelete
  16. I normally write my own validation, so thanks for this article, was interesting and worth the read.

    ReplyDelete
  17. can we use name for validation instead of id which will be in the cases of radio buttons checkboxes and listbox

    ReplyDelete
  18. hi is there any regular exp format for accepting only alphanumeric not only numeric in user name

    ReplyDelete
  19. hi im new to jquery plz tel me how to validate to combo box in this plugin...

    ReplyDelete
  20. Very helpful thanks

    ReplyDelete

Make in India