Kent Heberling leading from the front (end)

(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

Posted in jQuery, Projects | Tagged | 23 Comments »