Setup and configuration

In this section we will go through the different configuration options you can use
when setting up the validation.

• Read more about localization.
• Read more about giving input suggestions.
• Read more about making validation optional.
• Read more about showing help information.

Setup

// Setup form validation on all forms
$.validate();

// Setup form validation only on the form having id "registration"
$.validate({
    form : '#registration'
});

// Setup form validation on the forms that has id #registration and #login
$.validate({
    form : '#registration, #login'
});

If wanting to refresh the validation setup all you have to do is to call $.validate() once more. To remove error messages and error styling you must call the native function reset() on the form element.

<script>
// Reset form using jQuery
$('#container form').get(0).reset();
</script>

Configuration options

• ignore [ ] – Array with name of inputs that shouldn't become validated.
• errorElementClass 'error' – Class that will be applied on elements which value is invalid.
• borderColorOnError '#b94a48' – Border color on inputs which value is invalid (empty string to prevent the change of border color).
• errorMessageClass 'form-error' – Class name of div containing all error messages when validation fails. This option is only relevant when having configuration option errorMessagePosition set to top
• validationRuleAttribute 'data-validation' – name of the attribute holding the validation rules
• validationErrorMsgAttribute 'data-validation-error-msg' – define custom err msg inline with element
• errorMessagePosition 'element' – Can be either "top" or "inline"
• scrollToTopOnError true
• dateFormat 'yyyy-mm-dd'
• addValidClassOnAll false – whether or not to apply class="valid" even if the input wasn't validated
• decimalSeparator '.'
• inputParentClassOnError 'has-error' – twitter-bootstrap default class name
• inputParentClassOnSuccess 'has-success' – twitter-bootstrap default class name
• validateHiddenInputs false – whether or not hidden inputs should be validated
• inlineErrorMessageCallback null – whether or not hidden inputs should be validated
• submitErrorMessageCallback null – whether or not hidden inputs should be validated

Loading modules

Use the property modules to declare which modules you want to load. The property should contain a comma separated string with module names.

Use the property onModulesLoaded to declare a function that should be called after that the modules has loaded.

$.validate({
    modules : 'date, security',
    onModulesLoaded : function() {
        alert('All modules loaded!');
    }
});

Here you can read more about how to create your own modules.

Validation callbacks

There are four different callbacks you can declare when setting up the validation. There are also two types of events triggered on elements when they get validated.

• onError – Called when the user submits the form and one or more inputs has an invalid value.
• onSuccess – Called when the user submits the form and no input with an invalid value can be found.
• onValidate – Called when the user submits the form and all inputs have become validated. This callback is called before onError/onSuccess. You can add error messages from this callback by returning an object containing the property "element" (referring to the input element having an invalid value) and "message". You can also return an array with error objects if you want to add several error messages. The validation procedure will go on as normally if the callback function doesn't return anything.
• onElementValidate – Called after that an element have become validated.
• beforeValidation – jQuery event triggered on elements right before they become validated. Use this event if you want to prevent validation in runtime by setting data-validation-skipped="1".
• validation – jQuery event triggered on elements after they have been validated.

    $.validate({
        form : '#registration-form',
        modules : 'security',
        onError : function($form) {
            alert('Validation of form '+$form.attr('id')+' failed!');
        },
        onSuccess : function($form) {
            alert('The form '+$form.attr('id')+' is valid!');
            return false; // Will stop the submission of the form
        },
        onValidate : function($form) {
            return {
                element : $('#some-input'),
                message : 'This input has an invalid value for some reason'
            }
        },
        onElementValidate : function(valid, $el, $form, errorMess) {
            console.log('Input ' +$el.attr('name')+ ' is ' + ( valid ? 'VALID':'NOT VALID') );
        }
    });

    // Validation event listeners
    $('input')
        .on('beforeValidation', function(value, lang, config) {
            console.log('Input "'+this.name+'" is about to become validated');
            // Call $(this).attr('data-validation-skipped', 1); to prevent validation
        })
        .on('validation', function(evt, valid) {
            console.log('Input "'+this.name+'" is ' + (valid ? 'VALID' : 'NOT VALID'));
        });

Styling

This plugin is compatible with twitter bootstrap 3.x out of the box. The classes mentioned below is in addition to classes used by twitter bootstrap.

An input that has a valid value will get the class valid, if the value is invalid the input will get the class error. The error messages is placed in a span element with the class form-error. Both of these class names can be configured using the properties errorElementClass and errorMessageClass.

An input with an invalid value will automatically get a red border color. You can use the setup function if you want to change the border color to something else, set the property to an empty string if you don't want the border color to change when the input has an invalid value.

The valid class will only be applied on inputs that is validated. Set the configuration option addValidClassOnAll to true if you also want the inputs not having any validation rules to get the class valid when the form gets submitted.

$.validate({
    borderColorOnError : '#FFF',
    addValidClassOnAll : true
});

A typical markup for a form using twitter bootstrap has each input in a div element with the class form-group and a label element with the class control-label containing the description of the input. The input element should have the class form-control.

<form action="..." role="form">
    <div class="form-group">
        <label class="control-label" for="the-input">Input description</label>
        <input type="text" id="the-input" class="form-control" data-validation="required" />
    </div>
    ...

Default theme

You can use the default CSS-theme if you want the styling of the validation elements (error dialogs, icons etc) to look exactly as they do here on formvalidator.net. Add the following stylesheet declaration in the header of your document.

<link href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/theme-default.min.css"
        rel="stylesheet" type="text/css" />

Disabling features

You can disable some of the features of this plugin by using the following configuration options.

• validateOnBlur – Set this property to false if you only want the form to become validated when the user clicks on the submit button.
• showHelpOnFocus – Set this property to false if you don't want the plugin to search through the form for help information.
• addSuggestions – Set this property to false if you don't want the plugin to search through the form for input suggestions.

$.validate({
    validateOnBlur : false,
    showHelpOnFocus : false,
    addSuggestions : false
});

HTML5 support

As of version 2.2 you can use this plugin as a fallback solution for the validation attributes in the HTML5 specification. Add the module html5 to the module declaration and you can use the following native features:

Attributes: require, pattern, maxlength, min, max, placeholder

Input types: url, date, time, email, number

Elements: Use the element datalist to create input suggestions

    

        E-mail:
        
    
    

        User name: (only a-z characters)
        
    
    

        Favorite color
        
        
    
    ...


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
    $.validate({
        modules : 'html5'
    });
</script>

Positioning the error messages

The configuration parameter errorMessagePosition is used to tell whether or not error messages should be displayed in the top of the form or beside each input when the form gets submitted. The value is either set to top (which is default) or inline.

    

        

            E-mail:
            
        
        

            Password:
            
        
        

            
        
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>
<script>
    $.validate({
        validateOnBlur : false, // disable validation when input looses focus
        errorMessagePosition : 'top' // Instead of 'inline' which is default
        scrollToTopOnError : false // Set this property to true on longer forms
    });
</script>

Configure a specific message container for a certain input

You can point out the location of an error message for a certain input by using the attribute data-validation-error-msg-container.

    E-mail:
    

Custom methods that handles positioning of error messages

There's two configuration parameters that can be used to control how error messages gets added to the DOM.

$.validate({
    inlineErrorMessageCallback: function($input, errorMessage, config) {
       // Return an element that should contain the error message.
       // This callback will called when validateOnBlur is set to true (default) and/or errorMessagePosition is set to 'inline'
    },
    submitErrorMessageCallback: function($form, errorMessages, config) {
        // Return an element that should contain all error messages.
        // This callback will be called when errorMessagePosition is set to 'top'
    }
});

If wanting to use a custom method that handles the displaying/removing of error messages you should use the two methods described above. Return false to prevent the default behaviour when adding/removing error messages. Example:

$.validate({
    inlineErrorMessageCallback:  function($input, errorMessage, config) {
       if (errorMessage) {
          customDisplayInlineErrorMessage($input, errorMessage);
       } else {
          customRemoveInlineError($input);
       }
       return false; // prevent default behaviour
    },
    submitErrorMessageCallback = function($form, errorMessages, config) {
       if (errorMessages) {
          customDisplayErrorMessagesInTopOfForm($form, errorMessages);
       } else {
          customRemoveErrorMessagesInTopOfForm($form);
       }
       return false; // prevent default behaviour
    };
});

Notice that the default configuration uses errorMessagePosition: 'top' in conjunction with validateOnBlur: true which means that inlineErrorMessageCallback will be called when input is validated on blur and that the submitErrorMessageCallback will be called when the form gets submitted.