jQuery form validation

jQuery form validation is a library that helps you to validate your HTML form, it's completable with both Bootstrap 3 and Bootstrap 4.

Installation

You can follow one of these methods to get the package:

via npm

npm install jquery-form-validation

direct download

https://raw.githubusercontent.com/bnabriss/jquery-form-validation/master/dist/jquery.form-validation.min.js

from JSDELIVR

<script src="https://cdn.jsdelivr.net/npm/jquery-form-validation/dist/jquery.form-validation.min.js"></script>

How to use

Simple usage

html

<form>
    <div class="form-group">
        <input class="form-control" data-validator="required|min:4|max:10">
    </div>
</form>

javascript

$(document).on('blur', '[data-validator]', function () {
    new Validator($(this));
});

Add feedback message

Update your HTML to add element with selector .form-control-feedback, this element should belong to the parent .form-group (or your parent selector), you should also set the input label, this label will be visble in the error message, by adding the attribute data-validator-label to input itself.

<form>
    <div class="form-group">
        <input class="form-control" data-validator-label="First Name" data-validator="required|min:4|max:10">
        <div class="form-control-feedback"></div>
    </div>
</form>

Customize options

You can pass your custom options as a second parameter to the constructor.

$(document).on('blur', '[data-validator]', function () {
    new Validator($(this), {/* your options here*/});
});

And here is a table of available options

warning errors

you can specify some rules as warning errors, this completable with bootstrap 3 (or your custom options) since it has has-warning class for the parent .form-group

<form>
    <div class="form-group">
        <input class="form-control" data-validator="required|min:4|max:10" data-validator-warnings="min">
    </div>
</form>

Note that you should keep min in data-validator.

Available Validation Rules

Custom errors

You can bind the Validator object with your custom validator function.

Validator.prototype.valid_user_name = function (customLength) {
    if (this.val && customLength /*...*/){
        // ...
        return true;
    }
    return false;
};

And to use it in your forms

<form>
    <div class="form-group">
        <input class="form-control" data-validator="valid_user_name:8">
    </div>
</form>

Existing error messages

The previous listed errors already has it's errors messages (English)

Validator.prototype.language = {
    numeric: 'The {label} must be a number.',
    integer: 'The {label} must be an integer.',
    between_numeric: 'The {label} must be between {param0} and {param1}.',
    max_numeric: 'The {label} may not be greater than {param0}.',
    min_numeric: 'The {label} must be at least {param0}.',
    size_numeric: 'The {label} must be {param0}.',
    between: 'The {label} must be between {param0} and {param1} characters.',
    max: 'The {label} may not be greater than {param0} characters.',
    min: 'The {label} must be at least {param0} characters.',
    size: 'The {label} must be {param0} characters.',
    date: 'The {label} must be a date after {param0}.',
    before: 'The {label} must be a date before {param0}.',
    before_or_equal: 'The {label} must be a date before or equal to {param0}.',
    after: 'The {label} must be a date after {param0}.',
    after_or_equal: 'The {label} must be a date after or equal to {param0}.',
    age: 'The age should be more than {param0}.',
    email: 'The  {label} must be a valid email address.',
    in: 'The selected {label} is invalid.',
    not_in: 'The selected {label} is invalid.',
    different: 'The {label} and {otherLabel} must be different.',
    required: 'The {label} field is required..',
    required_if: 'The {label} field is required when {otherLabel} is filled.',
    required_if_val: 'The {label} field is required when {otherLabel} is {param0}',
    same: 'The {label} and {otherLabel} must match.',
    url: 'The {label} format is invalid.',
    regex: 'The {label} format is invalid.'
}

Bind error message

you can simply override the given messages using prototype object, and note that the key of the message is exactly the same of the function name, so when you add your custom validator you should add the suitable key language if you want to show the error, you can also use the syntax '{label}' in your message to be replaced with your [data-validator-label] that you have added to the input, you can also the syntax {param0} to bind the first parameter in the error your message.

Validator.prototype.language = {/* your custom error messages */}

Or you can merge exiting errors with additional messages using options parameter in the constructor

$(document).on('blur', '[data-validator]', function () {
    new Validator($(this), {
        language : {
            valid_user_name : 'The {label} should have a valid user name with length of {param0}'
        }
    });
});