Form validation has become never been easy like before. If you havent heard of jQuery, then its time to get know now. Jquery is an open source set of javascript library, that brings user interactivity in web applications so easy even for a beginner with just few lines of code.
In this tutorial, i am going to show how easy to validate a form with jquery. For this you will need to download the following:
JQuery Library – http://jquery.com
JQuery form validation plugin – http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Lets say we are going to validate a registration form like shown below..
Step 1:
Place the javascript files within the head section
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#registerForm").validate();
});
</script>
</head>
You should set the name and id of your html form same as $(“#registerForm”).validate();
Step 2:
For each required form element just place class=”required” and specify minlength tag inside it. For example
Name field -> class=”required”
Email field -> class = “required email”
<input name="name" type="text" id="name" class="required"> <input name="user_id" type="text" id="user_id" minlength="4"> <input name="user_email" type="text" id="user_email" class="required email">
Thats it! you will be able to validate form field textboxes without any advanced code.
For optional fields, you can specify class=”optional” or just leave it.
Step 3
In this last step you will add some styles to the error messages in the stylesheet.
.error {
font: normal 10px arial;
padding: 3px;
margin: 3px;
background-color: #ffc;
border: 1px solid #c00;
}
Thats it! see how the validation works like a charm..
Advanced Validation
The following are some of bit advanced validation code that might help you.
To check password and password retype are same
<tr>
<td>Password</td>
<td><input name="pwd" type="text" id="pwd" class="required" minlength="5"></td>
</tr>
<tr>
<td>Retype Password</td>
<td><input name="pwdc" type="text" id="pwdc" class="required" equalTo="#pwd"></td>
</tr>
To validate a website URL – optional field
It should check the URL and force the user to enter full url with http.
<tr>
<td>Website </td>
<td><input name="web" type="text" id="web2" class="optional defaultInvalid url">
<span class="example">http://www.example.com</span></td>
</tr>
To validate Phone Number
We dont want restrict phone numbers to be US only. Suppose if a foreign person enters a phone with + and dashes, we want that as well. To do this you will need to make slight change inside document.ready() in head section.
<script>
$(document).ready(function(){
$.validator.addMethod("NumbersOnly", function(value, element) {
return this.optional(element) || /^[0-9\-\+]+$/i.test(value);
}, "Phone must contain only numbers, + and -.");
$("#regForm").validate();
});
</script>
and now you can validate specifying class=”required NumbersOnly”. This will allow only numbers 0-9, hyphen and + for country code.
<tr>
<td>Phone</td>
<td><input name="phone" type="text" id="phone" class="required NumbersOnly"></td>
</tr>
Validating Username with no special characters
We dont want username to contain any special characters like dot,slashes etc. We only want to allow alphabets, numbers and underscore.
We create a function similar way like above
<script>
$(document).ready(function(){
$.validator.addMethod("username", function(value, element) {
return this.optional(element) || /^[a-z0-9\_]+$/i.test(value);
}, "Username must contain only letters, numbers, or underscore.");
$("#regForm").validate();
});
</script>
and now you can call using class=”required username”
<tr> <td>User ID</td> <td> <input name="user_name" type="text" id="user_name" class="required username" minlength="4"> </td> </tr>
Enjoy jQuery!
Similar Posts:
- how to strip special characters with jQuery form validation!
- How to insert HTML/BBcode tags to WordPress Comments Form
- PHP code to filter input against XSS/Injection attacks
- How to filter & escape data from Injection attacks in PHP!
- how to call a php script from javascript?
- iFrame in javascript wont work in Firefox [solved]
- Free Markup TextArea HTML Editor in Javascript
- A Simple WYSIWYG Editor in Javascript
- Free Markup BBCode Editor in Javascript
- Paypal return url issue with missing GET parameters
August 6, 2009
WOW THANKS ALOT!
February 15, 2010
nice
April 13, 2012
thank you for your scripting , it’s very use ful to validation .
April 13, 2012
thank you shashi.
September 10, 2009
its fantastic…but i expected more advanced jquery structures with good examples
September 11, 2009
Is there like message key properties in jquery validation? For internationalization. Like in your example you have a message which is “Username must contain only letters, numbers, or underscore.” , when browser locale becomes zh_CN it automatically changes to chinese. It’s easier if jquery can render this .html(‘
September 11, 2009
Is there a way where I can put the validation next to the label list instead of the bottom of the text box?
December 1, 2009
thanks for the good tutorial .. but it’s complex a bit for me !
January 28, 2010
wow.. thx for this tutorial.. make help me
February 10, 2010
Wow……! Great example……..Tanks alot…. It save me from a big problem….. Tanks once again……..
February 10, 2010
great tutorial maan…..
this saved us a lot of time that we used to spent for validation purposes in our projects..
thanx oce again for this simple and elegant style.
March 14, 2010
Nice tutorial
June 8, 2010
Thanks man helped me alot and saved me a lot time
works perfektly on ff and all ie !
June 13, 2010
thnaks,make help me
August 12, 2010
Oh boy thx, I went through the documentation here http://docs.jquery.com/Plugins/Validation but i had long and difficult time to try using a more advance technique than the simpler techniques. Thx for the head start.
August 14, 2010
Great ideas.
September 3, 2010
I can’t understand this…..
September 5, 2010
Quick & Easy Form Validation Tutorial with JQuery post for thanx.
February 25, 2012
I can’t understand this…..!!!!
totally awesome, thanks for clear explanation
thanks for sharing
September 20, 2010
I have two problems with this plugin (please assume that I am an absolute beginner!):
1. When I add a value to a field, the plugin doesn’t work anymore for that field (ex: ).
2. How do I remove the error message and keep only the border on the input field? If I just erase the message in the jquery code, it still keeps the div for the message which is visible.
Thanks for helping.
September 28, 2010
Ultimate Thanks Very Very Much…
October 19, 2010
Well done mate, can’t thank you enough. This is just what I wanted, nothing too complex. I now use this for future Web Design Project instead of oldskool javascript, which displays a pop up window.
October 19, 2010
Ah, thank you! Very nice write up of using jquery validation for forms.
November 4, 2010
Is there a sway to not count blank spaces because people will just get around the minlength vaildation by repatedly pressing their space bar.
November 7, 2010
Thank You!! Their Plug-in page doesn’t really explain things all that well!!! This post did the trick! Thanks again!
November 16, 2010
thanks a lot.. how to validate checkbox and radiobutton in jquery
November 29, 2010
Hi,
Really, really like the setup of this Tut.
I tested it on a dummy crap.jsp and everything worked really nice.
In my webapp however the field I want to check is an . And the above doesn’t seem to work.
Is there somewhere an example
?
December 4, 2010
It is a very nice example who will want to learn jQuey easily
thank you
December 27, 2010
Well done mate, can’t thank you enough. This is just what I wanted, nothing too complex. I now use this for future Web Design Project instead of oldskool javascript, which displays a pop up window.
http://xfavw.daffnas.cw.cm/ Jobs constitution journal atlanta
http://ycyzn.hallpasor.cw.cm/.html Boston celtics history rosters
February 12, 2012
very helpful post
thanks for sharing
December 28, 2010
nice tutorial man
December 30, 2010
very worst and U will learn in my concepts
January 11, 2011
useful info. thanks..soon:)
February 5, 2011
yet another great tutorial thanks ever so much!!
February 11, 2011
s there a way where I can put the validation next to the label list instead of the bottom of the text box?
February 15, 2011
Very well explained tutorial, thanks. Jquery looks useful.
February 18, 2011
super..super..super
Thanks a lot!
February 18, 2011
I want more jquery validations..its so good
February 27, 2011
Informative article, but merely adding class=”optional defaultInvalid url” doesn’t seem to help validate a website URL – optional field.
Can anyone help, please?
February 9, 2012
RajuUh…. yes it does. If you’re hanvig any issues, I’d be happy to help with them if you leave more specific details as to what problems you’re hanvig.
March 8, 2011
Nice Tutorial man.Each and every person can easily understand .Thank u very much
April 5, 2011
Very Good Article.
Thanks
JeevanSAthi
April 6, 2011
Thanks! Just wondering who wrote this article?
April 6, 2011
why its me…the blog owner? Thanks for posting.
April 8, 2011
To go more deeper in the subject, i’ve made a tutorial for jQuery Validate on my blog (it’s in french):
http://www.pierrefay.fr/jquery-validate-formulaire-validation-tutoriel-455
jQuery Validate is powerfull ans really easy to use.
I hope it’ll help you !
Thanks for this tutorial
April 9, 2011
Thanks for the code very helpful
April 11, 2011
Very Nice website. I just finished mine and i was looking for some ideas and your website gave me some. The website was developed by you? Thanks!
April 28, 2011
Thanks
Nice script
April 28, 2011
OH YES, BEST TIPS EVER!!!!! this is exactly the way designers like to code
May 2, 2011
superb……..
May 2, 2011
Thanks for this wonderfull post that full with info about topic I’m searching for.
May 13, 2011
just thanks!
May 19, 2011
Super.Thank u very much.
May 30, 2011
nice little tutorial
how to i add this validation to a dropdown?
eg:
Select Vehicle Make
– Please Select –
Audi
BMW
thanks in advance
June 25, 2011
gr8 stuff…
July 12, 2011
good say ,thank you a lot
July 20, 2011
Awesome work,good job!
July 25, 2011
Corpocrat,
This was great. The lowest barrier to entry into jQuery I’ve found so far.
It was Perfectly clear, Mercifully concise and VERY helpful.
Thanks a bunch!
July 28, 2011
Great tutorial.
Just a question. Is there a way to have the error notification appear INSIDE the fields not next to them? Thanks.
July 30, 2011
Thanks a lot….Great job!!! Really helpful
September 8, 2011
It’s laborious to find knowledgeable people on this matter, however you sound like you know what you’re speaking about! Thanks
You must take part in a contest for the most effective blogs on the web. I\’ll recommend this site!
September 23, 2011
Nice example
http://www.sharemycode.com/item/view/69/jquery-plugin-validation
October 11, 2011
Nice, but what about internationalization?
October 11, 2011
It was Perfectly clear, Mercifully concise and VERY helpful.
Thanks a bunch!
October 15, 2011
totally awesome, thanks for clear explanation
October 23, 2011
hey thanx a lot
great job…
November 1, 2011
Great tutorial…
December 15, 2011
Nice tutorial!
I have a question. There is a built-in rule in jQuery named “range”. In your article, we can specify minlength=”5″. But with “range”, it required an array, e.g. [5, 15].
I have tried the attribute range=”[5, 15]“, but it didn’t work. Is there anyway to specify an array like that in the html attribute?
January 23, 2012
The only quick tutorial that’s acually easy to follow and makes implementation and experimentation easy. Thanks!
January 24, 2012
Great! Thanks for a wonderful example
January 30, 2012
Quick & Easy Form Validation Tutorial with J Query post for THX.
January 31, 2012
Usuful Codes !
Every Week I folow your site…..
I share it in my Face book now….
Thank You
January 31, 2012
Worked it out nice, thanks for sharing!!
February 4, 2012
Your website is great and thank for your Articles.
February 13, 2012
Thanks for this tutorial because i need to cleanup some code and can use this tutorial !
March 1, 2012
Thnx a lot …for a helpful tutorial for beginner
April 10, 2012
I’m a super nooby with coding and I’m stuck on this part right here
And this is how I put my html code
But it’s not working, i tried putting the # is front of it too but still nothing. I have followed all the other steps to the tee and have gone back and read them like 10 times to double check!!!!
May 30, 2012
Nice work!Excellent yeh
June 7, 2012
Worked it out nice, thanks for sharing!!
June 8, 2012
when hitting the submit button, it only validates the first form field and ignores the rest. Has anyone else noticed this and/or fixed it?
June 13, 2012
Great Article
September 22, 2012
Excellent work! Very simple, and I’ve got a beautifully validating form with a few lines of code.
I got an error at first, “the value of the property ‘$’ is null or undefined”.
It had something to do with a mismatch between jquery and jquery.validate versions.
I fixed it by just using the jquery.js in the jquery.validate zip file, and my script tags look like this:
…
…
Where “scripts” is the scripts directory for my project. “lib” and “dist” are in the zip download.
Thanks! If it weren’t for this problem, I’d have had it going in about 10 minutes!
October 26, 2012
Dude, you rock!!
December 10, 2012
HAI MAN…. i am a dought .. how can i do for drop downs… plz sugggest me man
May 7, 2013
Thanx….very usefull
but I have a problem..
when i implementing this in a project its not working .. i dont know why , but its not working.
might be i have used many .js files thats why or something else ..
can anyone plz help me out ….
thanx