Powerful Multi-Functional Form Validation Plugin - jQuery Validation

File Size: 72.8 KB
Views Total: 20231
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Powerful Multi-Functional Form Validation Plugin - jQuery Validation

jQuery Validation is a javascript based plugin that helps you implement a powerful client side validator to your form elements that validate the value (like name, email, address, etc..) your user input when submitting.

You might also like:

Table of Contents:

Installation:

# NPM
$ npm install jquery-validation

# Bower
$ bower install jquery-validation

How to use it:

For more advanced usages, please check our more example pages listed below.

1. Include jQuery library and the jquery.validate.js JavaScript file in the HTML document.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Core -->
<script src="/path/to/dist/jquery.validate.min.js"></script>
<!-- Additional Methods -->
<script src="/path/to/dist/additional-methods.min.js"></script>
<!-- Local -->
<script src="/path/to/dist/messages_LANGUAGE.min.js"></script>
<script src="/path/to/dist/methods_LANGUAGE.min.js"></script>

2. Validate your HTML form on keyup and submit.

<form class="cmxform" id="signupForm" method="get" action="">
  <fieldset>
    <legend>Validating a complete form</legend>
    <p>
      <label for="firstname">Firstname</label>
      <input id="firstname" name="firstname" type="text">
    </p>
    <p>
      <label for="lastname">Lastname</label>
      <input id="lastname" name="lastname" type="text">
    </p>
    <p>
      <label for="username">Username</label>
      <input id="username" name="username" type="text">
    </p>
    <p>
      <label for="password">Password</label>
      <input id="password" name="password" type="password">
    </p>
    <p>
      <label for="confirm_password">Confirm password</label>
      <input id="confirm_password" name="confirm_password" type="password">
    </p>
    <p>
      <label for="email">Email</label>
      <input id="email" name="email" type="email">
    </p>
    <p>
      <label for="agree">Please agree to our policy</label>
      <input type="checkbox" class="checkbox" id="agree" name="agree">
    </p>
    <p>
      <label for="newsletter">I'd like to receive the newsletter</label>
      <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
    </p>
    <fieldset id="newsletter_topics">
      <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend>
      <label for="topic_marketflash">
        <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
      </label>
      <label for="topic_fuzz">
        <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
      </label>
      <label for="topic_digester">
        <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
      </label>
      <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
    </fieldset>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
$("#signupForm").validate({
  rules: {
    firstname: "required",
    lastname: "required",
    username: {
      required: true,
      minlength: 2
    },
    password: {
      required: true,
      minlength: 5
    },
    confirm_password: {
      required: true,
      minlength: 5,
      equalTo: "#password"
    },
    email: {
      required: true,
      email: true
    },
    topic: {
      required: "#newsletter:checked",
      minlength: 2
    },
    agree: "required"
  },
  messages: {
    firstname: "Please enter your firstname",
    lastname: "Please enter your lastname",
    username: {
      required: "Please enter a username",
      minlength: "Your username must consist of at least 2 characters"
    },
    password: {
      required: "Please provide a password",
      minlength: "Your password must be at least 5 characters long"
    },
    confirm_password: {
      required: "Please provide a password",
      minlength: "Your password must be at least 5 characters long",
      equalTo: "Please enter the same password as above"
    },
    email: "Please enter a valid email address",
    agree: "Please accept our policy",
    topic: "Please select at least 2 topics"
  }
});

// propose username by combining first- and lastname
$("#username").focus(function() {
  var firstname = $("#firstname").val();
  var lastname = $("#lastname").val();
  if (firstname && lastname && !this.value) {
    this.value = firstname + "." + lastname;
  }
});

//code to hide topic selection, disable for demo
var newsletter = $("#newsletter");
// newsletter topics are optional, hide at first
var inital = newsletter.is(":checked");
var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray");
var topicInputs = topics.find("input").attr("disabled", !inital);
// show when newsletter is checked
newsletter.click(function() {
  topics[this.checked ? "removeClass" : "addClass"]("gray");
  topicInputs.attr("disabled", !this.checked);
});

3. All validation methods.

// step
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      step: 10
    }
  }
});

// normalizer
$( "#myform" ).validate( {
  rules: {
    field: {
      required: true,
      normalizer: function( value ) {
        // Trim the value of the `field` element before
        // validating. this trims only the value passed
        // to the attached validators, not the value of
        // the element itself.
        return $.trim( value );
      }
    }
  }
});

// require_from_group
$( "#myform" ).validate({
  rules: {
    mobile_phone: {
      require_from_group: [1, ".phone-group"]
    },
    home_phone: {
      require_from_group: [1, ".phone-group"]
    },
    work_phone: {
      require_from_group: [1, ".phone-group"]
    }
  }
});

// URL
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      url: true
    }
  }
});

// required
$( "#myform" ).validate({
  rules: {
    field: {
      required: true
    }
  }
});

// remote
$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: {
        url: "check-email.php",
        type: "post",
        data: {
          username: function() {
            return $( "#username" ).val();
          }
        }
      }
    }
  }
});

// range length
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      rangelength: [2, 6]
    }
  }
});

// range
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      range: [13, 23]
    }
  }
});

// phoneUS
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});

// number
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});

4. All possible option to customize the form validator.

/* 
  Key/value pairs defining custom messages. 
  Key is the name of an element
  Value the message to display for that element. 
  Instead of a plain message, another map with specific messages for each rule can be used. 
  Overrides the title attribute of an element or the default message for the method (in that order). 
  Each message can be a String or a Callback. 
  The callback is called in the scope of the validator, with the rule's parameters as the first argument and the element as the second, and must return a String to display as the message.
  e.g.
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of [email protected]"
    }
  }
*/
messages: {},

/*
  Specify grouping of error messages. 
  A group consists of an arbitrary group name as the key and a space separated list of element names as the value. 
  Use errorPlacement to control where the group message is placed.
  e.g.
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
      error.insertAfter(element);
    }
  }
*/
groups: {},

/*
  Key/value pairs defining custom rules. 
  Key is the name of an element (or a group of checkboxes/radio buttons)
  Value is an object consisting of rule/parameter pairs or a plain String.
  Can be combined with class/attribute/data rules. 
  Each rule can be specified as having a depends-property to apply the rule only in certain conditions. 
  e.g.
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
*/
rules: {},

// default CSS classes
errorClass: "error",
pendingClass: "pending",
validClass: "valid",
errorElement: "label",

// If enabled, removes the errorClass from the invalid elements and hides all error messages whenever the element is focused. 
// Avoid combination with focusInvalid.
focusCleanup: false,

// Focus the last active or first invalid element on submit via validator.focusInvalid(). 
// The last active element is the one that had focus when the form was submitted, avoiding stealing its focus. 
// If there was no element focused, the first one in the form gets it, unless this option is turned off.
focusInvalid: true,

// Hide and show this container when validating.
errorContainer: $( [] ),
errorLabelContainer: $( [] ),

// Validate the form on submit. Set to false to use only other events for validation.
onsubmit: true,

// Elements to ignore when validating
ignore: ":hidden",

// Ignore title
ignoreTitle: false,

// Prepares/transforms the elements value for validation.
normalizer: function( value ) {
  // Trim the value of the `field` element before
  // validating. this trims only the value passed
  // to the attached validators, not the value of
  // the element itself.
  return $.trim( value );
},

// Callback for handling the actual submit when the form is valid. 
// Gets the form and the submit event as the only arguments. 
// Replaces the default submit. 
// The right place to submit a form via Ajax after it is validated.
submitHandler: function(form) {
  $(form).ajaxSubmit();
},

// Callback for custom code when an invalid form is submitted. 
// Called with an event object as the first argument, and the validator as the second.
invalidHandler: function(event, validator) {
  // 'this' refers to the form
  var errors = validator.numberOfInvalids();
  if (errors) {
    var message = errors == 1
      ? 'You missed 1 field. It has been highlighted'
      : 'You missed ' + errors + ' fields. They have been highlighted';
    $("div.error span").html(message);
    $("div.error").show();
  } else {
    $("div.error").hide();
  }
},

// A custom message display handler. 
// Gets the map of errors as the first argument and an array of errors as the second, called in the context of the validator object. 
// The arguments contain only those elements currently validated, which can be a single element when doing validation on focusout or keyup. 
// You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().
showErrors: function(errorMap, errorList) {
  $("#summary").html("Your form contains "
    + this.numberOfInvalids()
    + " errors, see details below.");
  this.defaultShowErrors();
},

// Customize placement of created error labels. 
// First argument: The created error label as a jQuery object. 
// Second argument: The invalid element as a jQuery object.
errorPlacement: function(error, element) {
  error.appendTo( element.parent("td").next("td") );
},

success: 'valid',

// Validate elements (except checkboxes/radio buttons) on focus in/out 
onfocusin: function( element ) {
  this.lastActive = element;

  // Hide error label and remove error class on focus if enabled
  if ( this.settings.focusCleanup ) {
    if ( this.settings.unhighlight ) {
      this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
    }
    this.hideThese( this.errorsFor( element ) );
  }
},
onfocusout: function( element ) {
  if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
    this.element( element );
  }
},

onkeyup: function( element, event ) {
  // Avoid revalidate the field when pressing one of the following keys
  // Shift       => 16
  // Ctrl        => 17
  // Alt         => 18
  // Caps lock   => 20
  // End         => 35
  // Home        => 36
  // Left arrow  => 37
  // Up arrow    => 38
  // Right arrow => 39
  // Down arrow  => 40
  // Insert      => 45
  // Num lock    => 144
  // AltGr key   => 225
  var excludedKeys = [
    16, 17, 18, 20, 35, 36, 37,
    38, 39, 40, 45, 144, 225
  ];

  if ( event.which === 9 && this.elementValue( element ) === "" || $.inArray( event.keyCode, excludedKeys ) !== -1 ) {
    return;
  } else if ( element.name in this.submitted || element.name in this.invalid ) {
    this.element( element );
  }
},

onclick: function( element ) {

  // Click on selects, radiobuttons and checkboxes
  if ( element.name in this.submitted ) {
    this.element( element );

  // Or option elements, check parent select in that case
  } else if ( element.parentNode.name in this.submitted ) {
    this.element( element.parentNode );
  }
},

// how to highlight invalid fields.
highlight: function( element, errorClass, validClass ) {
  if ( element.type === "radio" ) {
    this.findByName( element.name ).addClass( errorClass ).removeClass( validClass );
  } else {
    $( element ).addClass( errorClass ).removeClass( validClass );
  }
},

// called to revert changes made by option highlight, same arguments as highlight
unhighlight: function( element, errorClass, validClass ) {
  if ( element.type === "radio" ) {
    this.findByName( element.name ).removeClass( errorClass ).addClass( validClass );
  } else {
    $( element ).removeClass( errorClass ).addClass( validClass );
  }
}

5. API methods.

// check if the form is valid or not
myForm.valid();

// read, add and remove rules
myInput.rules();
myInput.rules("remove", rules)
myInput.rules("add", rules);

// destroy the validator
myValidator.destroy();

// set custom rule
$.validator.methods.email = function( value, element ) {
  return this.optional( element ) || /[a-z]+@[a-z]+\.[a-z]+/.test( value );
}

// add a compound class method
jQuery.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

// Modify default settings
jQuery.validator.setDefaults({
  debug: true
});

// Replace {n} placeholders with argumentsvar 
var template = jQuery.validator.format("{0} is not a valid value");
// later, results in 'abc is not a valid value'
alert(template("abc"));

// Add a custom validation method
jQuery.validator.addMethod("laxEmail", function(value, element) {
  // allow any non-whitespace characters as the host part
  return this.optional( element ) || /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(?:\S{1,63})$/.test( value );
}, 'Please enter a valid email address.');

// Show error messages
var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
  "firstname": "I know that your firstname is Pete, Pete!"
});

// Reset the form
validator.resetForm();

// Return the number of invalid field
validator.numberOfInvalids();

// Validate the form, returns true if it is valid
validator.form();

More Examples:

Changelog:

v1.20.0 (2023-10-10)

  • Fixed vinUS validation failing on valid vin numbers
  • Fixed race condition in remote validation rules
  • Removed pending class from fields with an aborted request
  • Fixed remote validation error tracking
  • Added escapeHtml option to avoid XSS attacks via showLabel method
  • Fixed minlength validation in ajaxSubmit-integration-demo.html
  • Improved required translation in pt_BR
  • Added Hindi translation
  • Added French currency translation

v1.19.4 (2022-05-20)

  • Fixed validation for input type="date" 
  • Wait for pendingRequests to finish before submitting form 
  • Fixed bug for Html Editors
  • Fixed ReDoS vulnerability in URL2 validation

v1.19.3 (2021-01-10)

  • fixed Regular Expression Denial of Service vulnerability 
  • Replaced deprecated jQuery functions

v1.19.2 (2020-05-23)

  • Core: Fixes deprecated calls to jQuery trim for compat with newer jQuery core versions

v1.19.1 (2019-06-15)

  • Change focus() to trigger("focus")
  • Add zh_TW translation for step message
  • Adding Serbian translation for step method message

v1.18.0 (2018-09-10)

  • Add Brazillian PIS/NIS number validation method
  • Add validation method for Polish telephone number
  • Updated link to EAN docs in creditcard.js
  • Allow N11 exchange for non-geo US phone
  • Add new BIN range for MasterCard
  • Add maxfiles, maxsize and maxsizetotal methods
  • Add greaterThan and lessThan methods
  • Don't call submitHandler when in debug mode
  • Cast empty data attributes to 'true'
  • Ignore elements that belong to other/nested forms
  • Use element.isContentEditable instead of hasAttribute
  • Add deprecation warning to 'date' method
  • Allow the normalizer to return any value
  • Guard against null & undefined values in required method
  • Added more locals

v1.17.1 (2018-07-17)

  • Update and bugfix

v1.17.0 (2017-07-29)

  • Pass on the value of the used submit button for scripted submits
  • Removed aria-required attribute
  • Assign rules to contenteditable via .validate() and .rules()
  • Count invalid fields with empty message in numberOfInvalids()
  • Added support for button elements with descendants
  • Add support for defining a global normalizer
  • Add localized number validation to methods_nl.js
  • Remove unreachable return from cifES.js
  • Add optional support to cifES, nifES and nieES 
  • Add netmask validation method
  • Add Polish tax id validation method
  • Fixed validation for specific case for Spanish NIFs
  • Added Step Range Validation to messages_ja
  • Add hungarian step message
  • Add Sindhi locale
  • Added norsk step translation
  • Add missing french step translation
  • Added nl- translation for "step" property
  • Add French translation for notEqualTo method

v1.16.1 (2017-04-08)

  • Update

v1.16 (2016-12-02)

  • support jQuery 3+

v1.15.1 (2016-07-23)

  • Fix multiple mime-type validation
  • IBAN require at least 5 chars
  • Correct notEqualTo jQuery reference
  • Added failing test
  • Fix group validation with 3 and more fields
  • Fix regressions
  • Update step validation to handle floating points correctly
  • Fix error when calling $.fn.rules() on a non-form element
  • Call errorPlacement in validator scope
  • Fixed issue with contenteditable elements in forms where events for single input validation would cause exceptions
  • Added Azeri language

v1.15.0 (2016-02-25)

  • Fixed code style issues
  • resetForm should also remove valid class from elements.
  • Unhighlighting field if already highlighted when using remote rule.
  • Bind the blur event just once in equalTo rule
  • Fixed error when calling .rules() on empty jquery set.
  • Fix handling of error messages with input groups.
  • Fix TypeError in showLabel when using groups settings
  • Adding a way to pass method name to remote
  • Validation fails to trigger when next field is already filled out
  • Required rule take precedence over number & digits rules
  • Error hidden but input error class not removed
  • Remote validation uses wrong error messages
  • Fixed field highlighting with remote validation.
  • Fixed :filled selector for multiple select elements.
  • Added doc reference to jQuery.validator.methods
  • Move message processing from formatAndAdd to defaultMessage
  • ErrorList should contain only the errors that it should
  • Extract the file name without including "C:\fakepath\"
  • HTML5 step attribute support.
  • Added support for "pending" class on outstanding requests
  • Added normalizer 
  • Split out creditcard method
  • Escape errorID for use in the regex, not to build aria-describedby
  • Escape single quotes in names avoiding a Sizzle Error being thrown
  • Instead of using validating field's value to skip api call, use the serialized data object of the request
  • Add support for contentEditable tags
  • BIC: allow digits 1-9 in second place of location
  • Accept method regex should be escaped properly.
  • Case-insensitive check for BIC
  • Correct postalCodeCA to exclude invalid combinations
  • Make postalCodeCA method more lenient
  • Added Macedonian localization.
  • Added missing pattern message in Polish (adamwojtkiewicz)
  • Fixed Persian translation of min/max message.
  • Updated messages_sk.js
  • Update Malay translation
  • Included messages from additional methods
  • Improving pt_BR translation and fixing a typo on the 'cifES' key.

v1.14.0 (2015-06-26)

  • Remove unused removeAttrs method
  • Replace regex for url method
  • Remove bad url param in $.ajax, overwritten by $.extend
  • Properly handle nested cancel submit button
  • Fix indent
  • Refactor attributeRules and dataRules to share noramlizer
  • dataRules method to convert value to number for number inputs
  • Update url method to allow for protocol-relative URLs
  • Remove deprecated $.format placeholder
  • Use jQuery 1.7+ on/off, add destroy method
  • IE8 compatibility changed .indexOf to $.inArray
  • Cast NaN value attributes to undefined for Opera Mini
  • Stop trimming value inside required method
  • Use :disabled selector to match disabled elements
  • Exclude some keyboard keys to prevent revalidating the field
  • Do not search the whole DOM for radio/checkbox elements
  • Throw better errors for bad rule methods
  • Fixed number validation error
  • Fix reference to whatwg spec
  • Focus invalid element when validating a custom set of inputs
  • Reset element styles when using custom highlight methods
  • Escape dollar sign in error id
  • Revert "Ignore readonly as well as disabled fields."
  • Update link in comment for Luhn algorithm

This awesome jQuery plugin is developed by jquery-validation. For more Advanced Usages, please check the demo page or visit the official website.