validate.js

Include the JavaScript file in your source

<script type="text/javascript" src="validate.min.js"></script>

Create the validation object with your desired rules. This needs to be in a <script> tag located just before your closing </body> tag. The reason for this being that the DOM needs to have your form loaded before you can attach your rules.

var validator = new FormValidator('example_form', [{
    name: 'req',
    display: 'required',
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email',
    depends: function() {
        return Math.random() > .5;
    }
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}], function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
});

FormValidator

The FormValidator object is attached to the window upon loading validate.js. After creation, it will validate the fields on submission of the form named formName.

The formName passed in to validate must be the exact value of the name attribute of the form

<form name="example_form"></form>

An array of fields will be used to perform validation on submission of the form. The array must contain objects containing these properties:

• name (required) - The name attribute of the element.

  <input name="email" />

• display (optional) - The name of the field as it appears in error messages. If not present in the object, the name parameter will be used.

  Example: If your field name is user, you may choose to use a display of "Username."

• rules (required) - One or more rules, which are piped together.

  Example - required|min_length[8]|matches[password_confirm]

• depends (optional) - A function that runs before the field is validated. If the function returns false, the field is never validated against the declared rules.

  depends: function(field) {
      return Math.random() > .5;
  }

A callback will always be executed after validation. Your callback should be ready to accept two parameters.

• errors - An array of errors from the validation object. If the length > 0, the form failed validation

  This array will contain javascript objects with up to four properties:
  - id: The id attribute of the form element
  - name: The name attribute of the form element
  - message: The error message to display
  - messages: The error message of every failed validation of the given field to display
  - rule: The rule that prompted this error
  

• event - If the browser supports it, the onsubmit event is passed in.

function(errors, event) {
    if (errors.length > 0) {
        var errorString = '';

        for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
            errorString += errors[i].message + '<br />';
        }

        el.innerHTML = errorString;
    }
}

validate.js supports the ability for you to include your own validation rules. This will allow you to extend validate.js to suit your needs. A common example of this would be checking the strength of a password.

First, you need to add another rule to the field. It must always be prefaced with "callback_"

rules: 'required|callback_check_password'

Then you must call registerCallback on your instance of the FormValidator with the name of your custom rule and a function taking one parameter. This function will be called with one argument, the value of the field. If the value passes your custom validation, return true, otherwise return false. You can set a message for this rule using the setMessage method as described below.

validator.registerCallback('check_password', function(value) {
    if (passwordIsStrong(value)) {
        return true;
    }

    return false;
})
.setMessage('check_password', 'Please choose a stronger password using at least 1 number.');

Callbacks behave according to the following rules:

#1. If the required rule is present, a callback will be fired once all other validation rules pass.
#2. If the field is not required and it is empty, the callback will not be called unless condition #3 is met.
#3. A callback will always be called if it is preceded by an '!' i.e. rules: '!callback_myCustomCallback'

setMessage

All of the default error messages are located at the top of validate.js in a defaults object. If you wish to change a message application wide, you should do so in the source code. If you would like to change a message for a form, use this method on your instance of the FormValidator object. When setting a new message, you should pass in %s, which will be replaced with the display parameter from the fields array

validator.setMessage('required', 'You must fill out the %s field.');

registerCallback

Used to pair a custom rule in the fields array with a callback to be executed upon validation.

validator.registerCallback('check_email', function(value) {
    if (emailIsUnique(value)) {
        return true;
    }

    return false;
});

registerConditional

An alternate syntax for declaring depends functions, which determine whether or not to validate a given field.

{
    name: 'first_name',
    rules: 'required',
    depends: 'checkForRandomNumber'
}

validator.registerConditional('checkForRandomNumber', function(field) {
    return Math.random() > .5;
});