Form Validation — jQuery plugin —

This is a form validation jQuery plugin built with flexibility and code semantics in mind. It uses only HTML5 required and data-* attributes and it's very easy and intuitive to implement. A major benefit of this plugin is that it is not intrusive at all, and it allows you to have whatever HTML structure you wish, and the validation will still work!

It is very customizable, so you can set your own error messages and their behaviour if you want, and a custom callback function to be called upon success. You can also add your own validation rules to be checked against, as many as you want per element! To see all the settings and examples of custom rules, custom error behaviour, and custom success callback function, please see the plugin initialization section (not definition) in script.js from the downloaded archive.

Below, you can see a demo along with the validation rules used in each case and the HTML attributes applied per element to achieve this result.

Please fill in your name.

Validation rule: not empty

HTML attributes: required="required"

Please fill in a valid email address.

Validation rule: not empty, valid email address

HTML attributes: required="required" data-email="true"

Please fill in your age (digits only).

Validation rule: not empty, only 0-9 characters

HTML attributes: required="required" data-int="true"

Please fill in a password.

Validation rule: not empty

HTML attributes: required="required"

The password confirmation doesn't match the password.

Validation rule: match value of element with ID given

HTML attributes: data-match="password"

Please select your reason.

Validation rule: not empty (!=="") *

HTML attributes: required="required"

To continue, you must agree to our terms and conditions.

Validation rule: is checked

HTML attributes: required="required"

Would you like us to contact you back?

Please choose an option.

Validation rule: an option is checked

HTML attributes: required="required" on one of the inputs

Select minimum 2 options

Please select minimum 2 options.

Validation rule: at least the given number of options are checked

HTML attributes: data-group="group identifier" on all inputs in the group, data-required="true" data-min="2" on one of the inputs

Select at least 1 and maximum 2 options

Please select at least 1 and maximum 2 options.

Validation rule: at least one option checked, at most the given number of options are checked

HTML attributes: data-group="group identifier" on all inputs in the group, data-required="true" data-max="2" on one of the inputs

Enter email or phone number

Please enter the email or the phone number.

Validation rule: one of the inputs valid

HTML attributes: data-group="group identifier" on all inputs in the group, data-required="true" data-min="1" on one of the inputs

Please enter 3 letters.

Validation rule: not empty, passes custom rules set

HTML attributes: required="required" data-rule="custom rule name"

Please enter 3 letters that come after "d".

Validation rule: not empty, passes custom rules set

HTML attributes: required="required" data-rule-1="custom rule name" data-rule-2="custom rule name"

Validation rule: not empty

HTML attributes: required="required" data-on-error="custom error name"

Please enter something.

Validation rule:

HTML attributes: value="Enter something" data-default="Enter something" class="is-default-value"

Please enter your message.

Validation rule: not empty

HTML attributes: required="required"

Please upload something.

Validation rule: not empty

HTML attributes: required="required"