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!

Markup

Create your form and all of its inputs. For each input that requires validation:

  1. Enter the validation error you want to appear as the input’s title attribute.
  2. 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
  3. 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.
  4. 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
    • showBottom
    • showLeft
    • showRight
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.

Includes

The only includes you need, aside from the jQuery library itself, are the Instant Validation JavaScript and CSS file.

1: <script type="text/javascript" src="instantvalidation/js/instantvalidation.pack.js"></script> 
2: <link rel="stylesheet" href="instantvalidation/css/instantvalidation.css" /> 

Initializing

Target the parent form(s) of your validated inputs to initialize the plugin.

1: $("form").instantValidation(); 

Options

  • fadeSpeed – the speed at which the validation messages fade in and out

View the Demo

Download the Demo

23 Responses to “Instant Validation jQuery Plugin”

  • Soenke says:

    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

  • BillSaysThis says:

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

  • BillSaysThis says:

    September 22, 2010 @ 12:01 pm

    Also, can validation be optional? That is, can be blank but if not must fit the specified format.

    • admin says:

      October 5, 2010 @ 10:52 am

      This is now added in the latest update!

  • David says:

    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…

    • admin says:

      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.

  • Roger says:

    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?

    • admin says:

      October 7, 2010 @ 7:30 am

      I hadn’t considered pre-populated forms when writing the plugin, but I can make that accommodation.

  • cristi says:

    October 13, 2010 @ 8:10 am

    Great job!
    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.

    • admin says:

      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.

  • captain says:

    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 :-(

    • admin says:

      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.

  • Anoroc says:

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

    • admin says:

      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.

  • Anoroc says:

    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.

    • admin says:

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

  • MaTix says:

    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?

    • MaTix says:

      March 13, 2011 @ 3:45 am

      I also found something I could not fix due too my limited knowledg of Javascript. I’ve added a date validation to your script wich works fine if you manualy type in the date, but I’ve added the JQuery datapicker ui to this field. Thus when you select a date via the datepicker ui you still get the bubble – but when you hit submit the bubble goes away or when you focus the field and de-focus again.

    • admin says:

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

      $(this).find(collection).each(function(){
      obj.next(“.error-message”).fadeIn(options.fadeSpeed);
      });

      “collection” is a variable in the jQuery plugin referring to all input classes that require validation.

  • coderov says:

    April 3, 2011 @ 4:37 am

    Great Work!

  • Paul says:

    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.

  • Kiran says:

    August 27, 2012 @ 6:33 am

    I need to validate the select field in form…how can we do through this technique

Leave a Reply