Lightweight Form Validator For Bootstrap - jQuery validator.js

validator.js is a small yet feature-rich jQuery form validation plugin for Bootstrap framework that currently comes with 6 validators: 'required', 'length', 'or', 'equals', 'callback' and custom REGEX patterns.

More features:

• Custom error messages.
• Allows to specify which form fields to be validated.
• Allows to validate form fields on submit or on blur.

How to use it:

1. Make sure you first have jQuery library and Bootstrap framework are loaded in your html page.

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

2. Load the jQuery validator.js plugin's files in the page.

<link rel="stylesheet" href="validator.css">
<script src="validator.js"></script>

3. Initialize the validator.js plugin and you're ready to go.

$('form').validator();

4. Add the form validators to your form fields using data-VALIDATOR attributes and define the error messages as these:

<input data-required="true"
       type="text" 
       class="form-control">
<span class="help-block error--required">
  Please fill out this field
</span>

<input data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
       type="text" 
       class="form-control">
<span class="help-block error--required">
  Please enter a valid address
</span>

<input data-required="true"
       name="email"
       data-or="username"
       type="text"
       class="form-control">
<input data-required="true"
       name="username"
       data-or="email"
       type="text"
       class="form-control">
<span class="help-block error--or">
  Fill out one of the two Fields
</span>

<input data-required="true"
       data-callback="customValidation"
       type="text"
       class="form-control">
<span class="help-block error--callback">
  Your Input is for some Reason Invalid
</span
<script>
window.customValidation = function( $input ){
  var isValid = false;
  //Do some Voodoo to figure out if the input is Valid
  return isValid;
}
</script>

5. Default plugin option to customize the form validator.

$('form').validator({
  elementsToValidate: [
    "input",
    "select",
    "textarea"
  ],
  onlyValidateOnSubmit: false,
  errorClass: "has-error",
  formRowSelector: ".form-group",
});

---

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