JQuery Form Validation And Hints: Client-side Form Validation
We designed this JQuery plugin to make the form validation task easier for users and developers. Just mark the required fields and assign them validation rules to check before submitting the form. Contains a predefined set of common validation rules and let you create your own ones.
Download
Demo
INSTALLATION
1. Add jquery.form-validation-and-hints.js to your scripts directory and include it in the HTML which must also contain a version of the JQuery Library.
2. In jquery.form-validation-and-hints.js set the classprefix that you will use to link form elements in the HTML with validation rules in the JS (default is “verify”).
3. Add the class “required” to wrap any field that should pass through a validation rule before submiting the form. Use any of the classes for predefined validation rules (verifyInteger, verifyURL, verifyMail) in the input inside the required wrapper.
4. Create your own validation rules in jquery.form-validation-and-hints.js declaring them inside the isTypeValidExt function.
OPTIONAL
- Use the class “iferror” to add the information text to be displayed next to the field when a validation error ocurrs after submiting the form.
- HINTS: Use the attribute title=”*Hint” to add text to be displayed inside the field. This hint won’t be submitted as a value and will disappear when the user makes focus on that form element. The value for the attribute title should start with * to be considered by the script as a hint.
49 comentarios
2 de December, 2010
[...] 下载地址：http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-val… [...]3 de December, 2010
This looks like an excellent version of a form validation. Only thing is that required should not accept all blanks. That is no problem since it seems like most validation routines forget about all blanks. I hope to use this in the next form I need to validate. Thanks you… TTFN3 de December, 2010
Thanks Andrea for your kind words!The purpose of our client-side validation is to prevent people from ignoring fields before submitting, not against intentional abuse. Such checks should be done server-side. Since the browser may not be running JavaScript, server-side checks must always be done anyway.
By the way - If the server needs to return the form to the user because of a problem, the “error” class can be used to highlight the fields that did not pass validation.
9 de December, 2010
In your demo the require field doesn’t seem to be working.9 de December, 2010
Hi David! It will be helpful if you can describe the problem, telling us what browser/OS you were using, etc.12 de December, 2010
[...] 下载地址：http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-val… [...]26 de December, 2010
HiNice work .
How about checkboxes ?
Is it possible with the curent relese ?
26 de December, 2010
Hi Daniel, checkboxes and radio buttons are supported. The form will not pass the validation if a checkbox placed inside a DIV.required is not checked.You should add a message (with the “iferror” class) in order to inform the user that the checkbox must be checked to proceed (e.g., ‘You must agree with the terms & conditions in order to sign up’). Otherwise, the user may not be able to spot the problem, and will think the form isn’t working.
7 de January, 2011
[...] 下载地址：http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-val… [...]4 de February, 2011
I like it but at least using Chrome, if you place the form inside a table, all fields will turn red when submitted even if they are valid. I traced this back to the above the form getting the error class as well. I had to remove the “, TR” part of the last line in “function showErrorOn( input )”. I’m not sure what is was initially needed for but in my case having the error class on parent TR elements is unnecessary.The other problem I have is that the moveTo() function will automatically place the cursor in the 1st invalid field when you click submit. When working in Firefox and Chrome this is no problem. In IE however, this triggers the rmErrorClass() function immeadiatly, which removes the error for that field without telling the user what is wrong. To fix this I commented out the “input.get(0).focus();” line in that function. The users can just click it themselves.
4 de February, 2011
Thanks Shawn for your feedback! We’ll apply those fixes in the next release.22 de February, 2011
Great work! Does it work with select fields. I cant seem to get this working?Any help?
22 de February, 2011
Hi Colin, thanks for your kind words.You can modify the
case 'select-one':case so it suits your needs, checking against the condition you will use on the HTML code for an invalid OPTION (as it could be having no value attribute).23 de February, 2011
Great script. Works as outlined. Is it also applicable to dropdown lists? I’ve applied the DIV.required around the dropdown(s) as is, but that doesn’t appear to work. Any ideas?23 de February, 2011
Hi Ropes, you can make the script validate your dropdown lists (the SELECT HTML tag) by editing the script’s code for the case ’select-one’.24 de February, 2011
Cheers mate!9 de March, 2011
Hey, Great piece of code. I am using it for one of my project. My forms validation looks great with it… I have a small problem, i hope you can help me..Any quick help in validating “Select” i want to validate country, so user must select a country. I tried to use select-one but i think i dont know the right way of using it.
Cheers mate..
9 de March, 2011
I think i found solution for SELECT dropdown…the actual code in JS file for select-one is
case ’select-one’: if( input.get(0)[ input.attr('selectedIndex') ].text == ”)
instead of .text when i changed it to .value. the code started working… so the new code is like this
case ’select-one’: if( input.get(0)[ input.attr('selectedIndex') ].value == ”)
its working for me…
Cheers…
24 de March, 2011
Hi - loving your script - thanks very much!I have one thing I can’t figure out. It’s the drop-down list. I have looked at the comments above but still can’t figure it out.
This is what I have in the js:
case ’select-one’:if( input.get(0)[ input.attr('selectedIndex') ].value == ”) { if( send ) moveTo(input); showErrorOn( input ); send = false; }break;
And this is what is on the page:
Year
2011
2012
2013
Required
It won’t validate. I know it suggests “editing the select-one” for cases of drop-downs but I can’t seem to figure out exactly what to change.
Appreciate any help you could pass along!
Mike
27 de March, 2011
Hi Mike! In order to validate the drop-down with the JS you have, the invalid option(s) should have an empty value attribute in the HTML.E.g:
<select name=”selectYear”>
<option value=”">This is invalid</option>
<option value=”2011″>2011</option>
</select>
Hope this helps.
28 de March, 2011
About the problem that people have with the select element, I had the same problem and this is my solutioncase ’select-multiple’:
if(input.val()==null) {
if( send ) moveTo(input);
showErrorOn( input );
send = false;
}
break;
At a new case in the switch which handle the input elements.
- Select -
<option value=”>
Select a correct value
This works for me.
I hope this will be useful
With this you can validate a select with multiple options too.
28 de March, 2011
If you want to validate a select you can do in this way- Select -
<option value=”>
Select a correct value
With this modification to the JS
case ’select-multiple’:
if(input.val()==null) {
if( send ) moveTo(input);
showErrorOn( input );
send = false;
}
break;
Add the lines above to the switch statement in JS
This work for me =)
11 de April, 2011
Hi there.I’m having issues getting the hints to work in IE on a password field. Works great on other browsers. Ever had this issue?
11 de April, 2011
Hi Latham.Unfortunately password field hints aren’t working in any version of IE. As soon as we fix this issue we will be uploading a new release.
13 de April, 2011
Firstly, Great Script!…How do you use this with a group of multiple checkboxes with different names, but you only want to require the user to check 1 ? I am having the problem that it makes the user check all of the checkboxes in the group to validate..18 de April, 2011
I’m trying to integrate this plugin to one of my forms and have come across an issue I haven’t seen addressed here. I have two checkboxes and I need to make sure at least one of them is selected.I put a required div around them, and can only get the submission to work if both are checked.
Any help is appreciated, thanks!
18 de April, 2011
Hi Josh and Jeremy! You seem to have the same case. Unfortunately, the validation loop is designed around the standard behavior of form elements, processing them one by one. Checkboxes are not meant to be grouped, so you will need to make important changes to the plugin to fit your situation.If you create a new validation loop that processes blocks instead of individual elements, I’m afraid you will have to rewrite the rest of the plugin to work with that scope. Having two validation loops will break the
if( send ) moveTo(input);logic, focusing elements out of order.Another solution, far less elegant but that may work, would be to modify the
case 'checkbox':, nesting its condition into anotherifstatement that checks a certain class is used in a parent element (e.g.,$(input).closest('.atLeastOneChecked'). If that is the case, you can get the status of the related checkboxes and sort out if it’s a valid situation or not. Since the validation loop takes inividual elements as its array, a mechanism shall be implemented to avoid checking all checkboxes in the group for each of its elements.22 de April, 2011
I’d like to see built-in support added for groups of checkboxes as well.I disagreed with your comment that checkboxes are not meant to be grouped.
The old “What toppings would you like on your pizza?” type of problem, by way of example. Presumably you want at least one topping and possibly more. :)
22 de April, 2011
Hi Michelle, Josh and Jeremy,I got confused, thinking there was no standard HTML mechanism to group checkboxes. Actually, they can be grouped the same way as radio buttons (sharing the same name attribute).
We can work over this, as well as revising the way radio buttons are processed, for a future release. We unfortunately cannot commit to a specific release date.
27 de June, 2011
This plugin doesn’t run for me while using JQuery >= 1.4.4 (Firefox) :(27 de June, 2011
@d32: have you tried running the example, in order to rule out your code? does it work with previous jQuery versions? does it work with current version, on another browser than FF?28 de June, 2011
All I did was replacing JQuery used in the demo with (for example):http://code.jquery.com/jquery-1.6.min.js
Stopped working for me in Firefox (5.0), continues to work in Chrome or IE.
30 de June, 2011
Hi,I am facing a problem with the dropdown list. When I am selecting an option from the dropdown it still validates it thus giving the error. One other thing is that I am using Knockoutjs to populate the dropdown lists. Can you help me out with some solution ?
Thanks in advance.
30 de June, 2011
d32: thanks for reporting the issue, we will study it for the next release.Prateek: we accept suggestions and bug reports, and welcome fixes from the community. Unfortunately we cannot offer free and timely support. If you are interested, we can work on your case on an hourly fee.
7 de July, 2011
password hints will disapper in IE7 when focusout. Do you found it?19 de July, 2011
Hi…looks like a fantastic script, but I can’t seem to get this working in an ASP.Net form. Is there any known limitations with ASP.Net?Thanks,
Aaran
19 de July, 2011
Hi Aaran! Since it is a client-side script, it is platform-agnostic, as long as the platform is generating standard HTML and not trying to inject client-side code. Otherwise you may have to unravel the platform’s leaky abstractions.6 de August, 2011
Hello,Thanks for this great script, but I found this error:
When the eMail domain is .info, like mymail {at} xxx(.)info, the script report it as incorrect.
Thanks,
Gerardo.
8 de August, 2011
Hi Gerardo! You can now download the last release of the script with the .info issue fixed. Thanks for your contribution.12 de August, 2011
hi dude, wt script i have to use to validate password and confirm password fields…i need your help12 de August, 2011
Hi Sasi, we can work on your case on an hourly fee. Drop us a line on the contact form (http://www.icograma.com/contacto) if interested.16 de August, 2011
In order to validate the password and confirm password fields.help me out16 de August, 2011
my form have two fields named password and confirm password..how to validate ?…help me out17 de August, 2011
wt is ur mail id Mr.sbustelo29 de September, 2011
1.3 is not availble on jquery plugin page. It is mentioned but without a link to this version :(12 de October, 2011
Is it possible to display the error message inside the Textbox? Can you please let me know how to do that?Thanks for your help in advance.
14 de October, 2011
Hi Sathya, such behaviour is outside the development scope. You may be able to obtain a similar effect playing with the field’s placeholder text.14 de October, 2011
Hi Maui, we fixed it right after receiving your comment. Thanks!23 de January, 2012
[...] Form Validation With Hints [...]comentar