Loading Gif

jQuery Validate plugin

10Oct2012

jQuery Validate plugin

This is a plugin for jQuery which will easily add validation to any form.

It uses html5 validation wherever possible and only uses javascript to style the browsers inbuilt validation. Where html5 validation isn’t possible it falls back to javascript.

You can download the plugin by clicking on the link in the downloads area (in the right sidebar if you aren’t on a mobile).

Usage

First copy the validate script to your server. Then include jQuery and the validate script in the head section of your website.

Then initiate the plugin by using the script below (make sure to wrap the script in a document ready or similar function).

The inbuilt options

The fryed.validate script has seven inbuilt options.

  • default_error_text: the error text used for an empty required field if no html5 valdation exists.
  • email_error_text: as above but for email fields ie ‘input type=’email”
  • number_error_text: as above but for number fields ie ‘input type=’number”
  • zipcode_error_text: as above but for fields with a class of ‘zipCode’ ie ‘input class=’zipCode”
  • url_error_text: as above but for url fields ie ‘input type=’url”
  • callback: a function to call instead of submitting the form. (useful for sending form data via ajax)
  • overwriteDefault: whether or not to use the scripts style of validation or fallback to browser specific validation. (either way those browsers capable of html 5 validation will use html5 validation . this purely effects the look of the inbuilt browser validation for cross browser consistancy)

If you want to validate an input/select/textarea then simply add the html5 required=’required’ attribute. Also the script will allow non html5 browsers to make use of the placeholder=’placeholder here’ attribute.

A basic example

A simple example which uses the overwrite default option to make the form perform the same across all browsers.

It overwrites the browsers default html5 styles but still uses the html5 functionality.

An example with an ajax callback

This example specifies the function ‘ajaxMe’ as a callback thus preventing the default submit action. The data can then be sent via ajax or some other functionality can be implemented.