After trying a load of non intuitive and not very useful jQuery form validation plugins I came up with this plugin. Its a jQuery plugin which helps create easy form validations with high flexibility and a large set of options.
Demo: Click Here
Advanced Demo: Click Here
Download: Click Here
Project Repository: Click Here
Features:
- Supports custom validations
- Options to toggle between live and onsubmit validations
- Completely customizable CSS
Usage:
-
In the head section add the following code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="javascripts/jquery.validate.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(function(){ jQuery("#<id of field to be validated>").validate({ expression: "if (<expression for validation>) return true; else return false;", message: "<message on validation failure>" }); }); </script>
-
Add the form in the body as shown below
<form action="" method="post"> <input type="text" name="<name of field to be validated>" id="<id of field to be validated>" /> <input type="submit" value="Submit" /> </form>
That’s it you are done!
For advanced users:
Options:
- expression: The javascript code which should have two outputs
or . The value of the field is given by . As this is a string escape characters for backslash and other non standard characters must be used. (Default: return true;) - message: The validation message for the field. (Default: “”)
- error_class: The CSS class of the error message container. (Default: “ValidationErrors”)
- error_field_class: The CSS class added to the field when found invalid. (Default: “ErrorField”)
- live: Sets whether the validation of the field should be live or on form submit. (Default: true)
Pingback: New jQuerry Tools to Increase Productivity and Safety | DesDevWeb
Who will tell us that what should be the expression for validation ??
You are not helping the beginners.
It could help experienced but not a little bit to beginners.
if you go to the demo and look at the source, all the expressions are demonstrated there.
It’s very helpful to me.
But How can i match Password and re-enter password with this jquery validation?
var email1 = $(“input#email1″).val();
if (email1 == “”) {
$(“img#email1_error”).show();
$(“input#email1″).focus();
return false;
}
var email2 = $(“input#email2″).val();
if (email2 != email1) {
$(“img#email2_error”).show();
$(“input#email2″).focus();
return false;
}
p.s. U can use this with anything U need to reenter.
What kinds of data can this plugin validate and how do I get the error or success message to display inside the input field?
Thanks.
Good Tutorial. and its useful too.
Thanks for the post.
How would you go about adding a function to focus on the first invalid field after hitting submit? It would be good if it would jump right to the field that that they need to correct.
Any ideas?
some problems with date validation
for example date 08-09-2012 – isnt valid
for proper validation add radix to parseInt function
parseInt(VAL.split(‘-’)[2],10)
Esta validación esta cool, pero me gustaría o como puedo hacer que me validara campos con el mismo nombre e id, Gracias
This validation is cool, but I would like or I can do I validate fields with the same name and id, Thanks
It would be helpful if there were docs or some type of library where we can look up the expressions to know what expression to input. I understand it is in the example, but it isn’t clear as to where to find that information.
I’m about to give up. I think this is really cool but I can’t seem to make it work can someone please help? My URL is http://www.awayfaringchef.com/contact.html.
Would you please provide me the codings for advanced demo?Please send me as early as possible.
Download it from the top of the page
can u send me the regular expression to validate website url,i have tried with many regular expressions but it was giving error.
check this site the best validator i ever saw
http://learnwebscripts.com/flexible-jquery-form-validator
Pingback: 50个表单功能验证安全和自定义化的jQuery插件 | EvilCode 邪恶代码
Pingback: 115 Useful jQuery Form Resources | Pulse2 Technology and Social Media News
Here you can find free scripts with demonstration
www 55points.blogspot com
Pingback: 30款实用的jQuery表单插件 - TC网页开发技术分享站
Thanks for providing this article. I am able to get the validation done if the fields are noncompliant to the coding done.
But I am facing one issue and that is even if the values entered are non-compliant, I am able to submit the form successfully which ideally it shouldnt.
kindly assist me in fixing this issue
This inline form Validation is A-W-E-S-O-M-E. Thanks For this article. Can i give multiple expressions and messages using if-else loop? i.e. for a field i’ve check the max length, valid number and it need not be empty and for each a different message
Any help is appreciated
hi sir, i am used jquery tab and implement this type of validation jquery also. but not working
javascript error : Object doesn’t support this property or method.
jQuery(function() {
jQuery(“#txtcmpname”).validate({
expression: “if (VAL) return true; else return false;”,
message: “Please enter the Required field”
});
});
How to solve please help me…
This is awesome. I don’t think you got the love you deserve. Your advanced form validation with all the various examples are great.
Pingback: jQuery For Web Design » 13 jQuery Form Validator Plugins
Meh. No workie. I’m sure there’s something simple to fix it, but I don’t have time to finish the documentation on someone else’s work.
This is the validation I was searching in WEB. Thank U very much. Another help , how to validate a mobile no.
Hi,
I’m facing two problems:
1. Inside the jquery function I can set a JS variable using PHP.
Now I’m trying to check if this value (uid) is the same as is provided in another text field (uid2) as:
jQuery(“#uid2″).validate({
expression: “if (VAL != ‘uid’) return true; else return false;”,
message: “*Wrong User”
});
But, it doesn’t work.
2. Next, I want to check if some data is input in a text field (group_name) if a check-box (cc_group) is checked. If the check-box is checked, there must be some data to return true, false if there is no data in the text-field but the check-box is checked. It should return true if the check-box is not checked and there is no data in the text-field. I tried below code:
var isChecked = jQuery(‘#cc_group’).is(‘:checked’);
jQuery(“#group_name”).validate({
expression: “if((isChecked) && (VAL.match(/^[A-Za-z_,]+$/))) return true; else return false;”,
message: “*Group”
});
Please help
Pingback: jQuery（などの）プラグインを使ってフォームにバリデーションを楽々追加する方法 | superChemical
I have a site where I allow people to start checking out, then go back and add something to their cart, then come back and complete checkout. I capture the data that they have entered so they don’t have to re-enter everything when they come back.
This means that they may have invalid data already present when they come back to the form, so I wanted to validate on load, ignoring any empty fields. It took me quite a while to find a way, so I thought I’d share the method I found:
$(‘input’, ‘#form’).each(function()
{
if($(this).val())
{
$(this).trigger(‘focusin’);
$(this).trigger(‘focusout’);
}
});
First of all Great tutorial. I want to validate group of text fields. At least one out of the group need to be required? Can any one help out. Thanks everyone
If some one desires expert view concerning blogging
after that i propose him/her to visit this website, Keep up the
fastidious job.
Awesome post.
After checking out a handful of the blog posts on your web page,
I really appreciate your way of blogging. I saved as
a favorite it to my bookmark website list and will be checking back soon.
Please check out my web site as well and tell me what you think.
Thanks for finally writing about >jQuery Live Form Validation | GeekTantra <Loved it!
Everyone loves what you guys are up too. This kind of clever work and reporting!
Keep up the wonderful works guys I’ve incorporated you guys to my blogroll.
Hello every one, here every one is sharing these kinds
of experience, thus it’s fastidious to read this webpage, and I used to visit this blog everyday.
Password validation via this system. Please validate in your hardcode as well, as someone can just disable this validation in their code inspector…
function hasUpperCase(password) {
return /[A-Z]/.test(password);
}
function hasLowerCase(password) {
return /[a-z]/.test(password);
}
function hasNumbers(password) {
return /\d/.test(password);
}
function hasNonalphas(password) {
return /\W/.test(password);
}
$(document).ready(function(){
$(“#user_password”).validate({
expression: “if (VAL && VAL.length > 8 && hasUpperCase(VAL) && hasLowerCase(VAL) && hasNumbers(VAL) && hasNonalphas(VAL)) return true; else return false;”,
message: “You must enter a valid password to continue.”
});
$(“#user_confirm_password”).validate({
expression: “if ((VAL == $(‘#user_password’).val()) && VAL) return true; else return false;”,
message: “Your passwords must match!”
});
});
If some one wants to be updated with latest technologies after that
he must be visit this web site and be up to date all the
time.
I just placed my second order. The best thing about this product for me and my body chemistry is it helps to cut down on those 2 – 3 pm carb cravings. I am happy for EVERY pound I drop! I’ve begun to show signs of getting back into my size 8′s again! Thank goodness, mainly because I refused to buy a whole new wardrobe of size 10′s!
Hi Geektantra,
Everything is good other than the whitespaces which most of the programmers forgot to apply. Anyway, It’s fantastic efforts to share learning. Keep it up my friend and do apply the whitespace validations because if you simply press spacebar it accepts.
Parminder
Great goods from you, man. I have understand your stuff previous to
and you are just too fantastic. I really like what you’ve acquired here, really like what you’re stating and the
way in which you say it. You make it entertaining and you still care for to keep
it smart. I cant wait to read much more from you.
This is actually a great website.
Pingback: The Comprehensive Guide to Customizing EmailDirect Sign Up Forms – Part 2 - Hello Inbox : An Email Marketing Blog by Email Marketing Service Provider, EmailDirect.
Awesome validation tool that doesn’t force you to use a form tag. One thing that would be nice though is if it worked with an .each function.. That’d be amazing!
Fantastic blog you have here but I was wanting to
know if you knew of any community forums that cover the same topics talked about here?
I’d really love to be a part of community where I can get feedback from other experienced individuals that share the same interest. If you have any recommendations, please let me know. Thanks!