Simplest jQuery Form Validator For Bootstrap - Validate Bootstrap

A very simple to use jQuery plugin that allows to validate form controls (input, select, textarea,etc) with custom error messages and styles using Bootstrap styling, HTML5 attributes and regular expressions.

How to use it:

1. Download and include the jQuery Validate Bootstrap after including jQuery JavaScript library. 

<link rel="stylesheet" href="bootstrap.min.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="validate-bootstrap.jquery.min.js"></script>

2. Use data-error-msg attribute to specify the error messages for invalid form fields.

<input id="lname" class="form-control" min="3" required type="text" data-error-msg="Required. Minimum 3 characters.">

3. Call the function on the form element to active the validator.

$('form').validator();

4. Available options.

$('form').validator({

  // The message to alert() user when .validator('check')
  alert: 'The form has some invalid fields. Please review.',

  // validate checkboxes
  checkbox: true,

  // data attribute to specify error messages
  dataErrorMsg: 'error-msg',

  // default error message
  defaultMsg: 'Required.',

  // error class to assign to form-group
  formGroupErrorClass: 'has-error',

  // classes to assign to help-block
  helpBlockClass: 'help-block with-errors',

  // validate radio buttons
  radio: true,

  // jQuery selecters for inputs to validate
  validateSelecters: 'input[type="text"],input[type="email"],input[type="number"],select,textarea',

  // custom error handler functions
  validHandlers: {},

  // validate form-control onBlur
  validOnBlur: true,

  // validate form-control onKeyUp
  validOnKeyUp: false,

  // validate radio / checkboxes when clicked
  validRadioCheckOnClick: true
  
});

Change log:

2016-07-29

• version bump for hidden field fix

---

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