Bootstrap Styled Form Validator - jquery.form-validation.js

The jquery.form-validation.js is a powerful, flexible, customizable jQuery form validator styled with the latest Bootstrap framework (Bootstrap 4 or Bootstrap 3).

The plugin currently comes with 25 pre-built validation rules and allows you to customize the feedback messages when the form fields are invalid.

How to use it:

1. Load the Bootstrap's stylesheet in the document's head section.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

2. Add validation rules separated with | to the data-validator attribute. All possible validation rules:

• required: required field
• numeric: numeric field
• integer: must be an integer
• between_numeric:10,30: must between two values
• max_numeric:30: must less than or equal the value
• min_numeric:10: must greater than or equal the given value
• size_numeric:10: must exactly equal the value
• between:2,10: the length must between two values
• max:10: max value
• min:2: min value
• size: field length
• date: must be a valid date
• before:2015-01-01: must be older than the value
• before_or_equal:2018-12-01 14:00:00: must be older than or equal the value
• after:2015-01-01: must be newer than the given value
• after_or_equal:2018-12-01 14:00:00: must be newer than or equal the given value
• email: must be a valid email address
• in:male,female: must be included in the list of values
• not_in:foo,bar: must not be included any of the list of values
• regex:[A-Z0-9]{6}: must match the regular expression
• different:old_password: must have a different value than field with the field name (attribute)
• same:password: must exactly the same value of the field with the field name (attribute)
• required_if:old_password: must have a value if the field with the name (attribute) is entered
• required_if_val:password,123456: must have a value if the field with the name (attribute) has exactly the value
• url: must be a valid URL

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

3. Add feedback messages to the form fields.

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

4. Initialize the form validator on the HTML form.

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

5. Possible options to customize the form validator.

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

      // selectors
      parentSelector: '.form-group',
      feedbackSelector: '.form-control-feedback',
      
      // CSS classes
      inputSuccessClass: 'is-valid',
      inputErrorClass: 'is-invalid',
      feedbackSuccessClass: 'valid-feedback',
      feedbackErrorClass: 'invalid-feedback',
      parentErrorClass: 'has-error',
      parentWarningClass: 'has-warning',
      parentSuccessClass: 'has-success',

      // validation rules here
      rules: '',

      // attribute name
      validatorNameAttr: 'validator-label'
      
  });
});

6. Customize the default feedback messages.

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.'
}

---

This awesome jQuery plugin is developed by bnabriss. For more Advanced Usages, please check the demo page or visit the official website.