validate-bootstrap.jquery

Validation Plugin for Bootstrap 3 and jQuery

jQuery plugin for Bootstrap to validate form

written by Michael A Smith May 12 2015

Requires:

• Bootstrap 3 (tested with 3.3.4)
• jQuery (tested with 1.11.1 & 2.1.4)

Features

• Validates input[type=text,checkbox,radio,email (regex for format),number], select and textarea
• Follows HTML5 required, min attribute.
• Defines error messages through data- attributes
• Uses native Bootstrap 3 styling for displaying errors messages

Installation

Install with Bower:

bower install validate-bootstrap.jquery

Also with NPM:

npm install validate-bootstrap.jquery

Usage

Initiate the validator with

$('form').validator({options});

Once initiated, will add $.fn.valid() plugin for use on form controls.

Default options:

{
    alert: 'The form has some invalid fields. Please review.',
    checkbox: true,
    dataErrorMsg:'error-msg',
    defaultMsg:'Required.',
    formGroupErrorClass:'has-error',
    helpBlockClass:'help-block with-errors',
    radio: true,
    validateSelecters:'input[type="text"],input[type="email"],input[type="number"],select,textarea',
    validHandlers: {},
    validOnBlur: true,
    validOnKeyUp: false,
    validRadioCheckOnClick: true
}

• alert: false or string. The message to alert() user when .validator('check')
• checkbox: validate checkboxes, true/false
• dataErrorMsg: data-* attribute to specify error message. data-error-msg by default
• defaultMsg: default error message
• formGroupErrorClass: error class to assign to form-group
• helpBlockClass: classes to assign to help-block
• radio: validate radio buttons, true/false
• validateSelecters: jQuery selecters for inputs to validate (not radio, checkbox. use radio and checkbox options)
• validHandlers: custom error handler functions. see section on errorHandlers below
• validOnBlur: validate form-control onBlur, true/false
• validOnKeyUp: validate form-control onKeyUp, true/false
• validRadioCheckOnClick: validate radio / checkboxes when clicked

Basic Example

//initiate validator
$('form').validator();

//check valid before submitting
$('form').submit(function(e) {
    e.preventDefault();


    if ($('form').validator('check') < 1) {
        ...process submit...
    }
})

HTML Markup, Radio & Checkboxes

Form element must contain novalidate property.

To make HTML element required, add the required attribute:

<input type="text" id="name" required>

Add data-error-msg="custom error message" or min="3" if desired.

To make a radio or checkbox group required:

1. Assign name attribute properly to all items in the group.
2. Add required and data-error-msg attributes to first radio or checkbox in group.
3. Message will be appended to parent form-group of first item.

##Custom Valid Handler

Custom valid handlers may be added by adding a function object to the validHandlers setting. The function object should be identified by a jQuery selecter and will then be applied to all inputs matching that selecter.

Return true if valid. Before returning true/false, formatting could be done on the input value.

For example, with:

<input type='text' class='customhandler form-control'>

Create a custom handler which changes the value to upper-case text and checks to see if it equals "JQUERY".

$("form").validator({
    validHandlers: {
        '.customhandler':function(input) {
            //may do some formatting before validating
            input.val(input.val().toUpperCase());
            //return true if valid
            return input.val() === 'JQUERY' ? true : false;
        }
    }
});

Handling select2 and Bootstrap

In my experience, select2 and Bootstrap don't play super well together. Even with select2-bootstrap-css there are still visibility issues.

A couple of hacks are required to make select2 and bootstrap work with this plugin.

• Make sure to include select2-boostrap-css in your project.
• Add the following styles to highlight the select2 input with errors:

.form-group.has-error .select2-selection {
    border-color:#a94442;
}

• Add the following binding on select change event:

$('select').on('change',function() {
    $(this).valid();
})