Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Basic jQuery Validation Plugin providing cross browser inline validation
JavaScript CSS
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

This library is no longer supported or maintained. I recommend the brilliant validation plugin for jQuery which can be found here:

jQuery Validation is a lightweight, easy to implement form validation plugin for jQuery.


By default, the required HTML looks like this:

<div class="ctrlHolder">
  <label for="test1">Label test required</label>
  <input id="test1" name="test1" type="text" class="fn_validate" data-validation-type="required">

Simply put, you will require a containing <div> that surrounds the label and form element, with a class on it which is referenced by the option controlHolder_class (default: 'ctrlHolder'). Then to ensure that the validation occurs on the form element, apply the validation class which is referenced by the option control_class (default: 'fn_validate')

Supported Validation Types

By default, there are a number of validation types supported. Cross browser HTML5 validation, JS validation for a number of scenarios, and the ability to extend and include your own validation types.

Any number of validation types can be applied together by using a space. However, be careful, because you can sometimes validate fields so much that they can never be valid. e.g. data-validation-type="required number email" would require an input that is entirely made up of numbers, which wouldn't pass the email validation.

HTML5 Validation

  • required
  • type="email"
  • type="number"
  • type="tel"
  • type="url"

JS validation

You can apply custom validation types by setting the data-validation-type attribute. Valid options are:

  • 'required'
  • 'float'
  • 'number'
  • 'email'
  • 'sameAs'
  • 'requiredValue'
  • 'regex'

* items marked with a * indicate that they require additional data-validation attributes in order to work. Please see the demo files.

The jQuery

In it's simplest form, you can initialise it like this:


You can also supply parameters like:

        debug: true,
        checkingTimeout: 500,
        status_icon: true

You can customise how the plugin finds label names, formats for error messages and icons, and animations of the error messages. You can even add custom validation functions.

Tested browsers

This solution may work on other browsers as well. These are the ones that it has been tested on

  • Microsoft Internet Explorer 7+
  • Mozilla Firefox 4+
  • Google Chrome 10+
  • Apple Safari 5+


Default values are in square brakets e.g. [20]

Base options

checkingTimeout: Number [500]

Time in ms to display the "checking" state, set to 0 to turn checking off

debug: Boolean [false]

Turn on debug mode to trace out comments using console.log()

submitClass: String ['fn_validation_submit']

Class used on the submit button to trigger the validation checks prior to submit

Error List options

errorList_id String ['validation_errorsList_']

ID that is applied to the error list HTML, appended by the form ID (used when there are multiple forms on a single page)

errorList_class String ['fn_validation_errorsList']

Class to be applied to the container where the validation list should appear above/below the form, after the submit button is pressed and there are errors on the page

errorList_format function(controlId, label, errorMessage) returns String

Returns the formatted list item to be displayed in the error list

errorList_animateIn function($errorList)

Animation used to display the errorList. Default is fadeIn(250)

errorList_animateOut function($errorList, callback)

Animated used to hide the errorList, then calls the callback. Default is fadeOut(250)

errorList_scrollTo Number [250]

Time taken to scroll to the form element, when clicked on in the errorList

errorList_scrollToOffset Number [-30]

Y position offset used when scrolling to the form element. Negative value means pixels above the element

errorList_scrollToOnSubmit Number [500]

Time taken to scroll up to the errorList when the submit button is pressed and there are errors.

errorList_scrollToOnSubmitOffset Number [-20]

Y position offset used when scrolling to the errorList. Negative value means pixels above the list.

Inline Status Message options

status_class String ['status']

Class applied to the inline status

status_format function(className) returns String

Format of the inline status container

status_messageClass String ['msg']

Class applied to the message part of the inline status

status_messageFormat function(className) returns String

Format of the message part of the inline status

status_animateIn function($status, message)

Animates the status message in. By default if the message is null, it just fades in the existing message, else it updates the HTML of the status and then fades in.

status_animateOut function($status, callback)

Animates the status message out. By default it uses fadeIn(250) and then calls the callback function on completion.

status_icon Boolean [true]

Displays a status icon that displays success, error or checking status.

status_iconClass String ['icon']

Class applied to the status icon

status_iconFormat function(className) returns String

Format of the status icon

Control options

control_class String ['fn_validate']

Class applied to the form element so the script knows to validate this input.

control_label function(field, controlHolderClass) returns String

Finds the label in relation to the field and controlHolder class and returns the text contained on the label. By default also returns the title attribute if the label field is missing.

Control Holder options

controlHolder_class String ['ctrlHolder']

Class of the containing <div> that sits around the form element and label.

controlHolder_errorClass String ['error']

Class applied to the controlHolder element when the field is in error.

controlHolder_validClass String ['valid']

Class applied to the controlHolder element when the field is valid.

controlHolder_checkingClass String ['checking']

Class applied to the controlHolder element when the script is checking if the field is valid or not.

Extending the JS Validation

You can extend your own validation types by using $.validation.addType(name, func) see the bottom of the demo HTML file for an example.

name String

The string you want to use in your data-validation-type attribute

func function(field, isValid, errorMessage) returns { 'errorMessage': String, 'isValid': Boolean, 'controlId': String}

This is the validation logic for your custom type. It accepts the field, the previous isValid function from other validation items on the same input (only set this to false if there is an error, never set to true) and the existing errorMessage (only set this if there is an error). Returns an object containing the errorMessage, the isValid state and the control's ID attribute (normally $(field).attr('id'))

Something went wrong with that request. Please try again.