Convenient HTML5 Form Validation Plugin For jQuery - validation.js

A convenient form validation plugin that provides a convenient means to implement client-side validation on common HTML input fields. It supports validating any input element that supports the use of the jQuery $('#element_id').val(); or $('#element_id).is(':checked'); methods. The plugin supports Unicode text, including emails that use Unicode characters. This plugin is released under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0).

Basic usage:

1. Add the jQuery validation.js plugin to your webpages like this:

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/validation.min.js"></script>

2. In order to use the plugin, you must supply certain attributes and classes in your form tags.

• Required CSS Class: validate; Rquired tag attribute: id
• Optional CSS Classes: allow-empty, check-length, check-email, check-match, numbers-only, letters-only, alphanumeric-only, is-checked

<form name="sample_form" action="#" method="post" id="sample_form">
  <div>

      <input type="text" name="your_name" id="your_name" placeholder="Enter your name."
      class="validate letters-only allow-spaces check-length"
      data-validation-length-min="3" data-validation-length-max="100">

      <div id="your_name-message" class="error-message hidden">You must enter a name between 3 and 100 characters.</div>

  </div>
  <div>

      <input type="text" name="email" id="email" placeholder="Enter your email."
      class="validate check-email" data-error-message="You must enter a valid email address.">

      <div id="email-message" class="error-message hidden"></div>

  </div>
  <div>

      <input type="checkbox" name="my_checkbox" id="my_checkbox"
      class="validate is-checked" data-error-message="This box must be checked.">

       <div id="my_checkbox-message" class="error-message hidden"></div> Check this box.

  </div>

  <button type="submit" name="form_submit" id="form_submit">Submit</button>
</form>

3. To enable the validation plugin, you must call a plugin method to bind it to either an HTML form or a container element that contains a collection of input elements.

// Bind to an HTML form
var flagIfCorrect = true; // Add the correct-alert class to a correctly filled input element.
$.validation.bindOnSubmit('sample_form', flagIfCorrect);


// Bind to an HTML container
var flagIfCorrect = true; // Add the correct-alert class to a correctly filled input element.
var returnClass = 'my-class'; // When you have a form where all fields are not validated, but you would like
                              // the the form to submit when a user presses return in one of these non-required inputs.
var callbackFunction = function () { console.log('Hello dere!'); } // A function for submitting the form or whatever
                                                                   // callback you prefer.
var functionArgs = ['arg1','arg2']; // An argument for the callback function. Need more than one argument?
                                    // Make the argument an array and process that array as arguments from
                                    // within your function.

// Catch when a user hits the return key in an input field.
$.validation.bindOnReturn('sample_form', flagIfCorrect, returnClass, callbackFunction, functionArgs);


var formEvent = 'click'; // click, submit, etc.
var eventElementId = 'submit_form'; // In this case, we're listening for a click event on a button with the ID submit_form

// Catch the submit button click and call submit function
$.validation.bind('sample_form', 'click', 'submit_form', flagIfCorrect, callbackFunction, functionArgs);

4. There are two useful plugin properties that you can use in your on scripts to check if validation has been run on the form and if the inputs passed validation.

• $.validation.ran: Contains a boolean value. Boolean true if validation ran on the form, boolean false if not.
• $.validation.passed: Contains a boolean value. Boolean true if all inputs passed validation, boolean false if not.

// Example usage:
if ($.validation.ran && $.validation.passed) {
   // do something
}

Change log:

2016-06-05

• Removed an unnecessary object property.

2016-05-31

• Code cleanup. Added support for allow-empty class

2016-05-24

• added bindBlur function

---

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