Instant Validation jQuery Plugin
September 21st, 2010
(Latest release, v2.0 on 10/07/2010)
Instant validation provides users with immediate form validation errors, correcting user input as soon as it’s entered rather than waiting for form submission. The appearance and position of the validation error messages are easily styled through CSS and plugin options. Currently available validation types include required fields, email addresses, phone numbers, zip codes, and numbers, but more will be added!
Create your form and all of its inputs. For each input that requires validation:
- Enter the validation error you want to appear as the input’s title attribute.
- Give the input a class to indicate validation type. The current validation types are:
- requiredText – any characters must be entered
- emailAddress – a valid email address must be entered
- int – a whole number must be entered
- phone – a 10 digit number with dashes must be entered (111-222-3333)
- zip – five digits must be entered
- If a field can either be empty or match a specific input type, assign it a class of “orEmpty” in addition to the validation type.
- Tell the plugin where the validation error should appear by giving it a class of:
- showTop – default value which will be used if no display class is provided
1: <input title="Please enter a valid email address." class="emailAddress" type="text" /> 2: <input title="Entere a 5 digit zip code." class="zip showBottom orEmpty" type="text" /> 3: <input title="Please enter your phone number formatted 111-222-3333." class="phone showRight orEmpty" type="text" />
Do not add any of the Instant Validation classes on inputs that require no validation.
Target the parent form(s) of your validated inputs to initialize the plugin.
- fadeSpeed – the speed at which the validation messages fade in and out
September 22, 2010 @ 6:42 am
Great job! Thanks for sharing this. If you add select box validation, it would be even better! Sönke
September 22, 2010 @ 11:58 am
Is it possible to use the number validation to enforce a length of time format such as dd:dd:dd (e.g., 00:03:42 for three minutes and 42 seconds)?
September 22, 2010 @ 12:01 pm
Also, can validation be optional? That is, can be blank but if not must fit the specified format.
October 5, 2010 @ 10:52 am
This is now added in the latest update!
October 2, 2010 @ 2:53 pm
Very elegant…just what I need. Everything working – do you have example of how to add your plugin into form script so the submit can only be triggered if all fields validate…
October 3, 2010 @ 12:57 pm
Thanks! I’ll be working on a new release of this plugin over the next few weeks and I’ll make sure to incorporate the submission block.
October 6, 2010 @ 7:10 pm
In my app I have a user profile form that the user can get to by clicking a menu. The first time I bring up the profile and fill in the blanks (like name, email address, etc) that are being validated, I can save the form. If later, I return to the profile form to fix a typo in the name field for instance, I cannot submit the form until I tab through all the fields. It seems that form submission is disabled when the form is first displayed. If I just need to make one little change to one field, how can I submit the form without having to tab through all the fields first?
October 7, 2010 @ 7:30 am
I hadn’t considered pre-populated forms when writing the plugin, but I can make that accommodation.
October 13, 2010 @ 8:10 am
I found a bug. If you have inside the form a table or other elements in witch you add the inputs, there is no validation. Perhaps you should use .find() instead .child(), the latter only travels a single level down the DOM tree.
October 13, 2010 @ 4:46 pm
Thanks for catching this for me, and thanks for the the .find() suggestion which worked. I’ve updated the demo and downloads with that fix.
November 10, 2010 @ 11:25 am
This is great, thanks! One thing I noticed – does not work right on Chrome.
I’m still trying to find a workaround, if I do, I will post it here or send you my fix… no promises though, I am new to jquery 🙁
November 11, 2010 @ 6:26 pm
I have also noticed intermittent display errors in Chrome but they have not occurred consistently enough for me to track down and fix. When the errors do appear, it’s usually only a minor aesthetic bug while the core functionality of validating input and preventing submissions still works.
November 11, 2010 @ 5:51 pm
Hi there. First, I gotta thank you for such an awesome solution for instant validation. It’s just what I was looking for!
I had a question though — is it possible to create a validation for both date (mm/dd/yy/) and time (xx:xx)?
November 11, 2010 @ 6:28 pm
The plugin currently does not check times but this will be considered for later releases. If you would like some assistance making this patch yourself, please let me know.
November 11, 2010 @ 6:36 pm
I actually attempted it with massive failure LOL. JS is not really my forte 😛
I added the variable based off the phone validator. ( “/” can’t be used?). Even after coming up with an alternative to the desired format, nothing happened. I’m sure I missed something, just not experienced enough to know what.
November 15, 2010 @ 9:28 pm
Yes, “/” is a special character which needs to be escaped, confusingly with a forward slash. So, in order to use the backslash character you need to type /.
March 13, 2011 @ 3:30 am
Is there also a handler I could add to the reset button to clear all bubbels if there are any?
March 13, 2011 @ 3:45 am
March 14, 2011 @ 8:08 am
There is not currently a function call to clear all validation bubbles, though here’s the start of one (not fully tested):
“collection” is a variable in the jQuery plugin referring to all input classes that require validation.
April 3, 2011 @ 4:37 am
April 6, 2011 @ 10:38 am
This is a great plugin you wrote and I really dig it so far, however I did find an odd quirk to it I thought I would let you know about. It seems if you try to validate any form elements that are inside of a fieldset, div or span etc.. it just fails silently and no validation is performed.
akcesoria kominkowe says:
October 1, 2011 @ 11:47 am
Hi there, You’ve done a great job. I will certainly digg it and personally suggest to my friends. I’m confident they’ll be benefited from this web site.
August 27, 2012 @ 6:33 am
I need to validate the select field in form…how can we do through this technique