jQuery validation engine

jQuery validation engine is a Javascript plugin aimed at the validation of form fields in the browser (IE 6-8, Chrome, Firefox, Safari, Opera 10). The plugin provides visually appealing prompts that grab user attention on the subject matter.

Validations range from email, phone, and URL, to more complex calls such as ajax processing or custom javascript functions. Bundled with many locales, the error prompts can be translated into the language of your choice.

Source: github.com

1. INCLUDE JS AND CSS FILES

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/
javascript"></script>
//Include jquery.validationEngine and its locale
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
//include the desired theme
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

2. HTML

Validations are defined using the field's class attribute. Here are a few examples showing how it happens:

<form id="formID" method="post" action="submit.action">
<input value="[email protected]" class="validate[required,custom[email]]" type="text" name="email" id="email" />
<input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />
</form>

Standard HTML5 attribute for error message

Customize error messages with data-errormessage and data-errormessage-* attributes on the form elements. For example:

<input type="email" name="email" id="email" data-validation-engine="validate[required,custom[email]]"
    data-errormessage-value-missing="Email is required!" 
    data-errormessage-custom-error="Let me give you a hint: [email protected]" 
    data-errormessage="This is the fall-back error message."/>

ATTRIBUTE'S VALUE

The following attribute's value will be loaded for the relative validation rule:

data-errormessage-value-missing

• required
• groupRequired
• condRequired

data-errormessage-type-mismatch

• past
• future
• dateRange
• dateTimeRange

data-errormessage-pattern-mismatch

• creditCard
• equals

data-errormessage-range-underflow

• minSize
• min
• minCheckbox

data-errormessage-range-overflow

• maxSize
• max
• maxCheckbox

data-errormessage-custom-error

• custom
• ajax
• funcCall

data-errormessage

• a generic fall-back error message

3. JAVASCRIPT

$("#formID").validationEngine();

4. OPTIONS

Options are typically passed to the init or attach action as a parameter.

    $("#formID1").validationEngine({promptPosition : "centerRight", scroll: false});
    $("#formID1").validationEngine('attach', {promptPosition : "centerRight", scroll: false});

validationEventTrigger

Name of the event triggering field validation, defaults to blur.

scroll

Determines if we should scroll the page to the first error, defaults to true.

binded

If set to false, it removes blur events and only validates on submit.

promptPosition

Where should the prompt show? Possible values are "topLeft", "topRight", "bottomLeft", "centerRight", "bottomRight". Defaults to "topRight". Default position adjustment could also be provided.

showOneMessage

Only display the first incorrect validation message instead of normally stacking it. It will follows the validation hierarchy you used in the input and only show the first error.

ajaxFormValidation

If set to true, turns Ajax form validation logic on. Defaults to false. Form validation takes place when the validate() action is called or when the form is submitted.

ajaxFormValidationURL

If set, the ajax submit validation will use this url instead of the form action

ajaxFormValidationMethod

HTTP method used for ajax validation, defaults to 'get', can be set to 'post'

onBeforeAjaxFormValidation(form, options)

When ajaxFormValidation is turned on, this is the function that will be called before the asynchronous AJAX form validation call. May return false to stop the Ajax form validation

onAjaxFormComplete: function(status, form, errors, options)

When ajaxFormValidation is turned on, this function is used to asynchronously process the result of the validation. the status is a boolean. If true, the ajax call completed and all the server side form validations passed.

onValidationComplete

When defined, it stops by default the form from auto-submitting, and lets you handle the validation status via a function. You can also return true in this function and the form will be allowed to submit.

jQuery("#formID2").validationEngine('attach', {
  onValidationComplete: function(form, status){
    alert("The form status is: " +status+", it will never submit");
  }  
});

custom_error_messages

This is where custom messages for IDs, Classes, or validation types are stored.

Custom error messages areexclusive from one another.ID messages will be displayed instead of anything else; Class messages will only be used if there is no ID message, and only the first message found associated with one of the classes will be used; Global Validator messages will only be used if there are no Class messages or ID messages.

These custom messages are declared in this manner:

jQuery("#formID2").validationEngine({'custom_error_messages' : {
        '#someId' : {
            'required': {
                'message': "This is a custom message that is only attached to the input with id 'someId' if it
                            has the validation of 'required'. This will always display, even if it has other
                            custom messages."
            },
            'custom[min]': {
                'message': "This is a custom message that is only attached to the input with id 'someID' if it
                            has the validation of 'custom[min[someNumber]]'. This will always display, even if
                            it has other custom messages."
            }
        },
        '.someClass': {
            'equals': {
                'message': "This is a custom message that is only attached to inputs that have the class of
                            'someClass' and the validation type of 'equals'. This will be displayed only on
                            inputs without an ID message."
            }
        },
        'required' {
            'message': "This is a custom message that replaces the normal error message for the validation
                        'required'. This only displays when there are no Class or ID messages."
        }
    }
});

focusFirstField

Specifies whether or not the first field in a form receives auto-focus after validation returns false. Default is set totrue. If you want to disable the auto-focusing use:

$('#form').validationEngine('attach', {focusFirstField : false});

onSuccess

If set, this callback function will be called when all validations passed.

onFailure

If set, this callback function will be called when it found an error.

autoPositionUpdate

Auto update prompt position after window resize, disabled by default

autoHidePrompt

Determines if the prompt should hide itself automatically after a set period. Defaults to false.

autoHideDelay

Sets the number of ms that the prompt should appear for if autoHidePrompt is set to true. Defaults to 10000.

showArrow

Show the arrow in the validation popup. Defaults to true

showArrowOnRadioAndCheckbox

Show the arrow in the validation popup when validating checkboxes and radio buttons. Defaults to false

5. ACTIONS

attach

Attaches jQuery.validationEngine to form.submit and field.blur events.

$("#formID1").validationEngine('attach');

detach

Unregisters any bindings that may point to jQuery.validaitonEngine.

$("#formID1").validationEngine('detach');

validate

Validates a form or field, displays error prompts accordingly.
Returns true if the form validates, false if it contains errors.

It is inversed for fields, it return false on validate and true on errors.

When using form validation with ajax, it returns undefined , the result is delivered asynchronously via functionoptions.onAjaxFormComplete.

// form validation
alert( $("#formID1").validationEngine('validate') );

// field validation
alert( $("#emailInput").validationEngine('validate') );

showPrompt (promptText, type, promptPosition, showArrow)

Displays a prompt on a given element. Note that the prompt can be displayed on any element by providing an id.

The method takes four parameters: 1. the text of the prompt itself 2. a type which defines the visual look of the prompt: 'pass' (green), 'load' (black) anything else (red) 3. an optional position: either "topLeft", "topRight", "bottomLeft", "centerRight", "bottomRight". Defaults to "topRight" 4. an optional boolean which indicates if the prompt should display a directional arrow

<fieldset>
   <legend id="legendid">Email</legend>
   <a href="#" onclick="$('#legendid').validationEngine('showPrompt', 'This a custom msg', 'load')">Show prompt</a>
</fieldset>

hide

The hide method can be applied to a form or a field.
It closes/hides error prompts.

// closes all form prompts
$('#formID1').validationEngine('hide');

// closes onle one prompt
$('#email1').validationEngine('hide');

hideAll

Closes/hides all error prompts on the page no matter what form they are attached to.

$('#formID1').validationEngine('hideAll');

updatePromptsPosition

Update the form prompts positions.

$("#formID").validationEngine("updatePromptsPosition")

• Demo Validators
• Demo Datepicker
• Demo Regular expressions
• Demo Checkbox
• Demo Hooks
• Demo with attribute instead of class
• Demo ShowPrompt
• Demo Overflown
• Demo Multiple Forms
• Demo field types
• Demo Global Settings
• Demo Ajax Java
• Demo Ajax Inline Php
• Demo Ajax Inline & Submit Php
• Demo Translations (JA)
• Demo Positioning
• Demo Chosen Library
• Demo jQuery-SelectBox Library