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: jQuery Live Form Validation Plugin: Form Validate | Greepit
Hello,
Gr8 plug-in. I immediately removed my old plug-in and installed this one. Up to know everything is ok but I have one question about validating dates. Unfortunately, my date is split into three boxes (day, month, and year). How can I validate this date.
PS, I am using eZ Publish CMS and it splits dates into three boxes.
Thx
Pingback: 智慧本 » 50个表单功能，验证，安全和自定义化的jQuery插件
Pingback: 30 个最好的jQuery表单插件 - 最JAVA–技术交流 java 行业动态 互联网前沿资讯 行业解析
How can i make a single validation to two or more fields?
Example:
Error Message
I want to validate both fields in a single validation expression. When i click submit the error message is relative for both fields. If the user fills the first field but not the second or vice-versa the error message should appear after both fields
thanks
im looking for the same thing, tried various things but nothing work, also I would like a function where you could call the validation except from submitting the form, such as a class or id, for example in my case in a next arrow in a multi page form
Pingback: 50 jQuery Form Plugins, Tutorials and Resources | webdesign14.com
Pingback: 50 jQuery Plugins for Form Functionality, Validation, Security and Customisation | Web Design Effect
Very Good Article.
Thanks
JeevanSAthi
Thanks Dear your work solved my problems thanks dear once again your Advance Form is such a amazing work
thanks
Abid Khan
Pakistan
appreciated
Many thanks. I tried several plugins and this one really is the best , it’s lightweight, easy to understand, and most important of all, actually works.
If anyone is having problems like I did with the latest versions of Chrome and Firefox being over helpful with validation and clashing with the plugin, you might find these useful . I found them on google somewhere and they did the trick of stopping the inbult validation to give the plugin freedom to do its thing.
$(‘input[type="email"]‘).bind(‘invalid’, function() {
return false;
});
$(‘input[type="text"]‘).bind(‘invalid’, function() {
return false;
});
Pingback: Xuan Luat's Blog » Blog Archive » Best jQuery plugins for working with Forms
Awesome. this has saved me so much time. Thanks for making it so simple and easy to use.
Pingback: jQuery Form Validation Plugins | Client Side Validation Examples and Tutorials
Hi
Now, after using yout validation a view weeks, it’s time for thanking you a lot. Great Plugin, very safe and fast. I love it, thx a lot.
Mischa
I cannot get the Mobile Number field to validate. I enter a 10-digit # and it’s never satisfied.
nevermind…you had an option to only allow a number that stars with a 9.
Can someone tell me what i’m doing wrong ? No matter how I input the number it will not vaildate ! I’m a newbie, as if you couldn’t tell.
jQuery(“#PhoneNumber”).validate({
expression: “if (VAL.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/)) return true; else return false;”,
message: “Please enter a valid phone number”
});
I’m having trouble getting url validation to work. Thanks for any help!
jQuery(“#url”).validate({
expression: “if (VAL.match(/^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$/)) return true; else return false;”,
message: “Please enter a valid URL”
});
this is a great list! thanks for sharing!
Often time the garden shed plans are not as involved as the plans for larger sheds.
Its good but i found one issue with live validation of check-box and radio on Google Chrome 13.x. with other browsers its working as expected.
its only working on submit button click but as live validation like text-box and text-area its not working. any solution.
I think this script is great! Except I’m having problems. I have a group of fields that need to be validated together. I use 3 select fields for date (month, day, year) and 3 select fields fo time (hh:mm:am). How can I see if any of the three are not selected (all 3 required) and return one error next to the 3rd field?
Pingback: 16 Useful jQuery Form Validation Tutorials | ZoomZum
This is fantastic. I was able to customize it just how I needed it for my website. Thanks ever so much for all your hard work. I have one question though: How would I define a field that would require both letters and numbers – as per UK postcodes. e.g. WA16 6DW?
Once again many thanks
Crapitoutjim
Hi,
Thanks for the great plugin.
How can I ignore the validation of hidden form elements, when I do the submit?
Hiya very cool web site!! Guy .. Beautiful .. Wonderful .. I will bookmark your site and take the feeds also?I am happy to search out so many useful info right here in the post, we’d like work out more strategies in this regard, thank you for sharing. . . . . .
Thanks man! Great form, I’m not very much into jQuery but forms like this makes me want to start learning it.
Thanks for sharing. See my collections here.. http://codershelpdesk.com/tag/jquery-form-validation/
I am facing a problem with date validation with jQuery Live Form Validation. If I put 02-09-2011, MM = 02, DD = 09, YYYY = 2011, it says “Please enter a valid Date”. What is the problem with this date? please help me.
How can I reset validation form and remove all validation error displayed
Thanks for such a good plugin… it was so easy to add new custom validations…
Is there a way to hide all validation errors?
Hi,
Great script but today i found a strange bug.
The validatin scriht does not accept an email if it has a hyphen in the domain like someone@some-one.com.
Is there a way to fix this issue, it may be too easy but i have no javascript knowledge..
Thanks..
Yes, change the regex to:
VAL.match(/^[^\\W][a-zA-Z0-9\\_\\-\\.]+([a-zA-Z0-9\\_\\-\\.]+)*\\@[a-zA-Z0-9\\_\\-\\.]+(\\.[a-zA-Z0-9\\_\\-]+)*\\.[a-zA-Z]{2,4}$/)
Hi- awesome!
I’m wondering if its possible for (VAL) in the required field to refer to an external text file of codes.
The hope is to use this as a field for the user to enter their code, and have the script validate it against a list of allowed 10charachter codes.
Am i hoping for too much? :}
Great plugin, easy to use… thanks!
Is there a way to have an image to show up as opposed to a text message?
Hi Alex,
Thanks for your appreciation. To replace the submit button with “back” and “next” buttons just add two submit input fields with value=”back” and value=”next”
this solution does not work for me! I need to have two submit buttons, regardless of value, it makes the validation. what would it be otherwise?
Hello,
I’m using your validator in my current project, however I use a lot of dynamic forms. Is there a way to get it to work with this? Inputs simply add an incremental number to the end of the id.
Has anyone done this ?
Thanks in advance
Hello, I would like to know how can I proceed to make this send the information when all the fields are valid. How can i know with javascript if all the fields where completed and then make it send the submit via php without refreshing the page?
I have a piece of code that does the submit and hide the form loading a new div with the “Thanks” message, but I don´t know how exactly to tell that this action can run or not according to the validation status, so i need to know how can I tell the action that the form validation was true or not. Was it clear?
hi,
this is a good plugin. juz wondering if i can use it in asp.net. i want to change the form validation from form.submit to button’s click event using jquery. that is when, i click a button i want to validate first just like what you have done right now. but I don’t want it to be validated in form.submit.
cesar I was wondering the same thing. it seems in the demo code that
jQuery(‘.AdvancedForm’).validated(function () {
alert(“Use this call to make AJAX submissions.”);
});
is what takes over the form submit. just remove this part of the code and it will work in asp.net so that you can use c#/vb.net instead of calling your function in js.
check this !
http://workwithphp.info/?p=190
I really like all of the demos so I put it within my project but unfortunately it clashes with Wijmo that is required in our project.
It would be great if both the validation you have could work with Wijmo also!
Great paintings! That is the kind of information that are supposed to be shared around the net. Disgrace on the seek engines for no longer positioning this submit higher! Come on over and consult with my website . Thanks =)
Nice tip and well explained
but jquery.validate has alot more..
Hi Geektantra,
I’m writing to express my appreciation to you guys. You provided me just what I need to complete my web application project. Please keep up the good work as I will continue to use your plugin whenever possible as a way I express my thanks.
I have a suggestion as well. Please make a tutorial on how to use all of your plugin function (every details if possible). There’s a learning curve
Thank you.
Pingback: jQuery Live Form Validation- Easy Form Validations | codeManiac - Snippets, Templates, API and the best developer content
hey, thanks
This is gr8 thing but Im having a problem where I want to know if there was no error in the form. I mean I want to do something like “$(‘#form1′).isvalidated()” or something.
Is there anyway to do that ?
Thanks
Arfeen
A good solution could be “jQuery Walidate”.
There you can set your own callback-functions for the submit button.
http://jquery.dop-trois.org/walidate/
Pingback: jquery Form Validation Plugins | prosoxi.com
Pingback: jQuery form validation; field required if checkbox selected | active questions php
tnx for this highly customizable plugin
my problem is that I can’t give a regex for URL:
jQuery(“#id_link”).validate({
expression: “if (VAL.match(/^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&%\$#_]*)?$/)) return true; else return false;”,
message: “enter a valid url”
});
42424