Simple jQuery Input Validator For Bootstrap Forms - bsValidate

bsValidate is a simple lightweight jQuery plugin used to validate required/email/character text fields for your Bootstrap forms before submitting.

How to use it:

1. Load the jQuery bsValidate plugin in your Bootstrap project, after jQuery JavaScript library.

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="jquery.bsvalidate.js"></script>

2. The basic example.

<!-- Fields need to be wrapped in a .field-group to ensure proper display of error messages -->
<div class="form-group">
  <!-- A label should be included, either with the <label> tag or an element given the .label class -->
  <label class="control-label">Name</label>
  <!-- This field will be required, because it uses the .required class -->
  <input type="text" name="name" class="form-control required" />
</div>
<div class="form-group">
  <label class="control-label">Email</label>
  <!-- This field will also be required, because it uses the [required] attribute -->
  <input type="text" name="email" class="form-control" required />
</div>
<div class="form-group">
  <label class="control-label">Message</label>
  <!-- No validation will be applied to this field -->
  <textarea name="message" class="form-control" rows="8"></textarea>
</div>
<div class="form-group">
  <input type="submit" class="btn btn-primary" value="Submit" />
</div>

$('#simpleForm').bsValidate();

3. Custom error messages.

<form id="customMessagesForm" action="success.html" method="post" class="well">
  <div class="form-group">
    <label class="control-label">Name</label>
    <input type="text" name="name" class="form-control" />
  </div>
  <div class="form-group">
    <label class="control-label">Email</label>
    <input type="text" name="email" class="form-control" />
  </div>
  <div class="form-group">
    <label class="control-label">Message</label>
    <textarea name="message" class="form-control" rows="8"></textarea>
  </div>
  <div class="form-group">
    <input type="submit" class="btn btn-primary" value="Submit" />
  </div>
</form>

$('#customMessagesForm').bsValidate({
  fields:{
    name: {
      required: {
        helpText: "Please enter your name.",
        alert: "You are required to enter your name."
      }
    },
    email: {
      required: {
        helpText: "Please enter your email.",
        alert: "You are required to enter your email."
      }
    }
  }
});

4. Global options.

$('#simpleForm').bsValidate({

// required input fields
requiredSelector: "input.required:not(:checkbox),textarea.required,select.required,[required]",

// A list of fields
fields: {},

// A jQuery selector used to identify the parent element for each field.
formGroupSelector: '.form-group',

// Determines which attribute should be used to identify the form elements from the {fields} object.
attrAsKey: 'name',

// Combine alerts into a single alert box, rather than separate boxes for each message, as an unordered
// list. Optionally, the unordered list can be replaced with a single message if {alertMessage} is set
// to something other than null (see below).
mergeAlerts: false,

// Use a single, general alert message rather than individual messages for each validation error.
// If {mergeAlerts} is set to TRUE, this message will replace the list of validation messages.
alertMessage: null,

// For <select> fields, change what the plugin considers as "blank" 
// (i.e. "-- Select --")
blankSelectValue: "",

// Set {novalidate} to false to use browser validation for fields with the [required] attribute 
// (browser validation is overriden by default).
novalidate: true,

// Help text only shows on field change by default. Set this to TRUE to display help text for
// fields on form submission as well.
toggleHelpTextOnSubmit: false,

// If a field has a dependency, changing the value of the parent field will trigger validation on the child.
// Set this property to FALSE if you do not want this behavior.
triggerDependentValidationOnChange: true,

// Automatically scroll the page on form submission so the alerts are in view.
autoScrollToAlerts: true,

// Callback function that fires after form submission, but before any validation takes place.
// Could be used to clear out existing error message from server-side validation prior to displaying bsValidate messages.
// DEFAULT: function(){} (FUNCTION)
before: function(){},

// Callback function that fires after all fields pass validation, but before the form submits.
// In case you want to submit your form with JavaScript (Ajax) or run more JavaScript before submitting,
// an event parameter is passed to the function, and event.preventDefault() can be used.
// DEFAULT: function(e){} (FUNCTION)
success: function(e){},

// Callback function that fires if one or more fields fail validation. By default, the form is prevented
// from submitting.
// DEFAULT: function(e){ e.preventDefault(); } (FUNCTION)
fail: function(e){}

});

5. Custom the validator & error messages.

fields: {
  // Require the field
  required: {
    helpText: "Custom required help text.",
    alert: "Custom alert for required field."
  },

  // Make sure it looks like an email address
  email: {
    helpText: "Custom email address help text.",
    alert: "Custom alert for an email address field."
  },

  // Limit the number of characters
  characters: {
    limit: 140,
    helpText: "Custom character limit help text.",
    alert: "Custom alert for a field with a character limit (probably a <textarea> field)."
  },

  // Compare the field value against a regular expression pattern
  regex: {
    pattern: /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/g,
    helpText: "This example checks for a URL.",
    alert: "But you can put any valid regex pattern here"
  },
  
  // Compare the field value against the value of another field
  match: {
    field: "fieldName",
    helpText: "Use the [name] attribute of the field we're checking against.",
    alert: "This compares the literal string values of the two fields. So '0.1' and '.10' do not match and will not validate."
  }

  // Use a custom validation function to evaluate a field value.
  custom: {
    fn: function(inputElem){
      return inputElem.val() !== 'desired value';
    },
    helpText: "The input element (jQuery object) is passed into the function."
    alert: "This can be used for more complex scenarios than the standard options can accommodate. The function needs to return a Boolean value. An expression that evaluates to TRUE will trigger the validation.",
  }
},

Change logs:

2016-12-13

• V1.3.0: Add formGroupSelector and attrAsKey settings.

2016-10-04

• Update 'characters' validation option to use 'max' and 'min' properties instead of 'limit' only

2016-09-29

• Add triggerDependentValidationOnChange property

2016-09-22

• Add custom function validation method

2016-07-12

• v1.0.0

2016-02-24

• Removing preventDefault() from form submit event

v0.7.2 (2016-02-19)

• Major updates to dependent fields to fix bugs and add onBlur events

2016-02-18

• Beefing up dependent fields logic

2016-02-11

• Adding conditional validation (required only) for dependent fields

2016-02-05

• Added 'before()' method which fires after submission but before any validation takes place

2015-11-11

• Improved isBlank() function to account for unchecked checkboxes

2015-06-16

• v0.6.1
• Fixed issue when specified field was not found, or form contains no fields

2015-05-01

• v0.6.0

2015-04-30

• Added ability to validate that two field values match

2015-04-22

• Added regex validation option for fields

---

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