icograma

diseño y desarrollo de interacción

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 latest version
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.

53 comentarios

# • Web开发者必知的12款jQuery插件 | 小荣博客

2 de December, 2010

[...] 下载地址:http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-val… [...]

# • Andrea

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… TTFN

# • Santiago Bustelo

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

# • David

9 de December, 2010

In your demo the require field doesn’t seem to be working.

# • Santiago Bustelo

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.

# • Web开发者必知的12款jQuery插件 : : 登高望远

12 de December, 2010

[...] 下载地址:http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-val… [...]

# • Daniel

26 de December, 2010

Hi
Nice work .
How about checkboxes ?
Is it possible with the curent relese ?

# • Santiago Bustelo

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.

# • Web开发者必知的12款jQuery插件 | IT左手边

7 de January, 2011

[...] 下载地址:http://www.icograma.com/nuestro-trabajo/open-source/jquery-form-validation-and-hints/jquery-form-val… [...]

# • Shawn

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.

# • sbustelo

4 de February, 2011

Thanks Shawn for your feedback! We’ll apply those fixes in the next release.

# • Colin

22 de February, 2011

Great work! Does it work with select fields. I cant seem to get this working?

Any help?

# • sbustelo

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).

# • Ropes

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?

# • sbustelo

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’.

# • Ropes

24 de February, 2011

Cheers mate!

# • Saji

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

# • Saji

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…

# • Mike

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

# • sbustelo

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.

# • koitoer

28 de March, 2011

About the problem that people have with the select element, I had the same problem and this is my solution
case ’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.

# • koitoer

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 =)

# • Latham

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?

# • ncunningham

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.

# • Jeremy

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

# • Josh

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!

# • sbustelo

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 another if statement 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.

# • Michelle

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. :)

# • sbustelo

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.

# • d32

27 de June, 2011

This plugin doesn’t run for me while using JQuery >= 1.4.4 (Firefox) :(

# • sbustelo

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? 

# • d32

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.

# • Prateek

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.

# • sbustelo

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.

# • rene

7 de July, 2011

password hints will disapper in IE7 when focusout. Do you found it?

# • Aaran

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

# • sbustelo

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.

# • ncunningham

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.

# • sasi

12 de August, 2011

hi dude, wt script i have to use to validate password and confirm password fields…i need your help

# • sbustelo

12 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.

# • sasi

16 de August, 2011

In order to validate the password and confirm password fields.help me out

# • sasi

16 de August, 2011

my form have two fields named password and confirm password..how to validate ?…help me out

# • sasi

17 de August, 2011

wt is ur mail id Mr.sbustelo

# • Maui

29 de September, 2011

1.3 is not availble on jquery plugin page. It is mentioned but without a link to this version :(

# • Sathya

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.

# • sbustelo

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.

# • sbustelo

14 de October, 2011

Hi Maui, we fixed it right after receiving your comment. Thanks!

# • 29 Jquery Plugins For Developer | Wordpress New Tricks For Begginers

23 de January, 2012

[...] Form Validation With Hints [...]

# • Jayde

8 de February, 2012

Is there somewhere else we can download the plugin from? The jQuery plugin repository appears to be down.

Thanks,

Jayde.

# • GL

3 de March, 2012

When I only use the two first inputs in the demo (by deleting the rest of the inputs in the code), I get the following bug: the first input goes back to normal color if I click “submit” a second time.

This is fixed when I add another input in the form, but I need it to work with only two inputs (login and password). Any idea how I could fix this?

# • GL

3 de March, 2012

Ok I think I found a cause for the bug: when it tries to scroll but there is no reason to do so (because the form is short) then the bug occurs. I commented out the moveTo function and it works fine.

# • sbustelo

3 de March, 2012

Hi  Jayde, we are now serving the file ourselves. Sorry for the inconveniences. 

GL, thanks for your comments. Even in your case it seems you won’t need the moveTo function, it would be great to get to the root of the problem and keeping current functionalities. What browser where you using when you found the bug?

comentar

Los comentarios son moderados, lo que puede demorar su publicación una vez enviados.
Riobamba 719 2A C1025ABO Buenos Aires, ARGENTINA | (+54 11) 4811-2437
Licencia Creative Commons Atribución-No Comercial 2.5. Permitida y promovida la reproducción total o parcial sin fines de lucro, mencionando URL ("www.icograma.com").