HTML5 Form Validation Plugin For Bootstrap - Bootstrap Validator

Bootstrap Validator is a great alternative to the jQuery Form Validation plugin since it's not available for free download. The plugin makes uses of jQuery and HTML5 attributes to provide flexible, customizable and AJAX-enabled validation functionalities for your Bootstrap forms.

Basic usage:

1. Add the minified version of the Bootstrap Validator plugin to your Bootstrap project. Make sure the validator.min.js script after jQuery library.

<!-- Bootstrap core CSS -->
<link href="/path/to/bootstrap.min.css" rel="stylesheet">

<!-- JS files -->
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/validator.min.js"></script>

2. Add built-in and custom validation rules to matched form fields using both standard HTML5 form attributes and non-standard data attributes as follows:

• type="email": The value must be a valid email address
• type="url": The value must be an absolute URL
• type="number": The value must be a valid number, with additional constraints via max, min and step attributes
• pattern="...": custom pattern using REGX
• required: Required field
• data-match="#password": Great for password fields
• data-minlength="5": Minimum number of characters
• data-remote="/path/to/remote/validator": Validate the form field via AJAX
• data-error: custom error messages

<form role="form" data-toggle="validator">
  <div class="form-group">
    <label for="inputName" class="control-label">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="Cina Saffary" required>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-inline row">
      <div class="form-group col-sm-6">
        <input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
        <div class="help-block">Minimum of 6 characters</div>
      </div>
      <div class="form-group col-sm-6">
        <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
        <div class="help-block with-errors"></div>
      </div>
    </div>
  </div>
  ...
</form>

4. Call the function with default options on the form and the plugin will do the rest.

$('form').validator()

5. Available options with default values.

$('form').validator({

  // the delay in milliseoncds
  delay: 500,

  // allows html inside the error messages
  html: false,

  // disable submit button if there's invalid form
  disable: true,

  // Scroll to and focus the first field with an error upon validation of the form.
  focus: true,

  // define your custom validation rules
  custom: {},

  // default errof messages
  errors: {
    match: 'Does not match',
    minlength: 'Not long enough'
  },

  // feedback CSS classes
  feedback: {
    success: 'glyphicon-ok',
    error: 'glyphicon-remove'
  }
  
})

Change log:

v0.11.9 (2017-03-17)

• Fixing another issue with <select multiple/> elements.
• No longer skipping a custom validator if its attribute has a false value. 
• Fixing stale values being read for data-attributes.
• swapping order of `:first` selector for a safer `.focusError()`.

2016-12-16

• Fixed Multiselect default behavior

---

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