The Most Indispensable jQuery Form Validation Reference Guide

Using a library to do form validation can save lots of your development time. Being a tested and proven library guarantees it. jQuery Form validation library is the most popular validation library. This post collects all my notes and references on jQuery Form validation library. This includes a large bunch of sample code and a complete reference guide to all the built-in validation rules in the library.

Reference Links:

Website: http://jqueryvalidation.org/
GitHub : https://github.com/jzaefferer/jquery-validation
Author’s website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

A Simple Usage Demo:

Include the jQuery validation library. You can download the latest version or use the CDN:


<!--include jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 
type="text/javascript"></script>

<!--include jQuery Validation Plugin-->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" 
type="text/javascript"></script>

<!--Optional: include only if you are using the extra rules in additional-methods.js -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/additional-methods.min.js" 
type="text/javascript"></script>

Now you can setup the validation rules for the form like this:


$("#myemailform").validate(
      {
        rules: 
        {
          fullname: 
          {
            required: true
          },
          email: 
          {
            required: true,
            email: true
          }
        },
        messages: 
        {
          fullname: 
          {
            required: "Please enter your name"
          },
          email: 
          {
            required: "Please enter your email address."
          }
        }
      });

myemailform is the id of the form. (where form is like this: <form id='myemailform' ...> ) the validate() function takes the rules, messages and other options for the validation.

In simple form, the format is like this: $('#formid').validate( { rules:{ }, messages:{ } } );

rules contains the form elements and the corresponding validations.

rules: 
    {
        input_1: 
        {
            validation_1: param_1,
            validation_2: param_2
        }
        input_2: 
        {
            validation_3: param_3,
            validation_4: param_4
        }                            
    }

validation_1, validation_2 etc are validation rules. The reference section below has a list of all built-in validation rules that you can choose.

messages contains the customized message for the validations:

messages: 
    {
        input_1: 
        {
            validation_1: "message for validation_1",
            validation_2: "message for validation_2"
        }
        input_2: 
        {
            validation_3: "message for validation_3",
            validation_4: "message for validation_4"
        }
    }

If you skip the message for a validation, the default message is displayed.

See a complete demo @Codepen

Always Customize the Error Message

The messages parameter is optional. If you skip the messages parameter, the plugin will display default, auto-generated messages. However, You should always customize the validation error messages. If you imagine form as a dialog between your website and your user, the messages play an important role. Don’t leave it to the auto-generated default messages. Explain to your user what is wrong and suggest solutions.

Common Text Input Validations

Common validations for text field are ‘required’, minlength, maxlength or matching with a text pattern for a pattern In the example code above, fullname: { required: true } declares the fullname field to be mandatory.

minlength,maxlength or rangelength

Use the minlength,maxlength or rangelength validation rules to check the length of the text field input.


$("#productform").validate(
      {
        rules: 
        {
          prodid: 
          {
            required: true,
            maxlength: 10
          },
          email: 
          {
            required: true,
            email: true,
            minlength:10
          },
          address:
          {
            required: true,
            rangelength:[10,250]
          },
          message: 
          {
            rangelength:[50,1050]
          }
        }
      });

The Most Indispensable jQuery Form Validation Reference Guide

Reference Links:

A Simple Usage Demo:

Always Customize the Error Message

Common Text Input Validations

minlength,maxlength or rangelength

A Note About minlength

Numeric Range: min, max, range

Checking the Text Pattern: Email, URL, Phone Number etc

Validating a Dropdown List

Validating Radio Groups

Validating a Group of Checkboxes

Note About minlength

Skipping Validations for Certain Elements

Conditional Validations

Ajax Validation - Checking the Uniqueness of email or username

Adding Your Own Validation Rules

Display Error Messages Using ToolTips

Validations for Dynamically Generated Elements

A Few Things to Note While Adding Validations Dynamically:

Adding and Removing Rules Dynamically

Validation Rules Ready Reference

required:

minlength:

maxlength:

rangelength:

min:

max:

range:

equalTo:

remote:

Format Validation Rules

email:

url:

number:

digits:

creditcard:

Additional Methods

accept:

extension:

skip_or_fill_minimum:

require_from_group:

maxWords, minWords, rangeWords

pattern:

alphanumeric:

integer:

lettersonly:

letterswithbasicpunc:

nowhitespace:

dateITA:

time:

time12h:

url2:

ipv4:

ipv6:

bankaccountNL:

bankorgiroaccountNL:

mobileNL:

phoneNL:

giroaccountNL:

postalcodeNL:

mobileUK:

phoneUK:

phonesUK:

postcodeUK:

cifES:

nieES:

nifES:

phoneUS:

vinUS:

zipcodeUS:

bic:

iban:

See Also

Categories