Powerful Form Validation Plugin For jQuery and Bootstrap 3

The plugin is NOT CURRENTLY Available For FREE DOWNLOAD. I recommend you to use the other form validation plugins instead.

Yet another jQuery and Bootstrap 3 powered form validation plugin to validate form values your user input with 16+ built-in validators. You can write new validators with Bootstrap Validator's APIs as well.

Available validators:

• between: Check if the input value is between (strictly or not) two given numbers
• callback: Return the validity from a callback method
• creditCard: alidate a credit card number
• different: Return true if the input value is different with given field's value
• digits: Return true if the value contains only digits
• emailAddress: Validate an email address
• greaterThan: Return true if the value is greater than or equals to given number
• hexColor: Validate a hex color
• identical: Check if the value is the same as one of particular field
• lessThan: Return true if the value is less than or equals to given number
• notEmpty: Check if the value is empty
• regexp: Check if the value matches given Javascript regular expression
• remote: Perform remote checking via Ajax request
• stringLength: Validate the length of a string
• uri: Validate an URL address
• usZipCode: Validate a US zip code

Basic Usage:

1. Include the required jQuery javascript library and Twitter's Bootstrap 3 in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>

2. Include jQuery Bootstrap Validator plugin after jQuery library.

<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>

3. Create a sample sign in form with form validation functionality.

<form id="defaultForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Username</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Retype password</label>
<div class="col-lg-5">
<input type="password" class="form-control" name="confirmPassword" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label" id="captchaOperation"></label>
<div class="col-lg-2">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Sign up</button>
</div>
</div>
</form>

4. The javascipt to apply the validators on the form and customize the warning messages when typing.

<script type="text/javascript">
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));

$('#defaultForm').bootstrapValidator({
message: 'This value is not valid',
fields: {
username: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
},
different: {
field: 'password',
message: 'The username and password can\'t be the same as each other'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required and can\'t be empty'
},
identical: {
field: 'confirmPassword',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password can\'t be the same as username'
}
}
},
confirmPassword: {
validators: {
notEmpty: {
message: 'The confirm password is required and can\'t be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm are not the same'
},
different: {
field: 'username',
message: 'The password can\'t be the same as username'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator) {
var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
}
});
});
</script>

5. The default options.

// The first invalid field will be focused automatically
autoFocus: true,

// Support declarative usage (setting options via HTML 5 attributes)
// Setting to false can improve the performance
declarative: true,

// The form CSS class
elementClass: 'fv-form',

// Use custom event name to avoid window.onerror being invoked by jQuery
// See #630
events: {
  // Support backward
  formInit: 'init.form.fv',
  formError: 'err.form.fv',
  formSuccess: 'success.form.fv',
  fieldAdded: 'added.field.fv',
  fieldRemoved: 'removed.field.fv',
  fieldInit: 'init.field.fv',
  fieldError: 'err.field.fv',
  fieldSuccess: 'success.field.fv',
  fieldStatus: 'status.field.fv',
  localeChanged: 'changed.locale.fv',
  validatorError: 'err.validator.fv',
  validatorSuccess: 'success.validator.fv'
},

// Indicate fields which won't be validated
// By default, the plugin will not validate the following kind of fields:
// - disabled
// - hidden
// - invisible
//
// The setting consists of jQuery filters. Accept 3 formats:
// - A string. Use a comma to separate filter
// - An array. Each element is a filter
// - An array. Each element can be a callback function
//    function($field, validator) {
//  $field is jQuery object representing the field element
//  validator is the BootstrapValidator instance
//  return true or false;
//    }
//
// The 3 following settings are equivalent:
//
// 1) ':disabled, :hidden, :not(:visible)'
// 2) [':disabled', ':hidden', ':not(:visible)']
// 3) [':disabled', ':hidden', function($field) {
//return !$field.is(':visible');
//  }]
excluded: [':disabled', ':hidden', ':not(:visible)'],

// Map the field name with validator rules
fields: null,

// Live validating option
// Can be one of 3 values:
// - enabled: The plugin validates fields as soon as they are changed
// - disabled: Disable the live validating. The error messages are only shown after the form is submitted
// - submitted: The live validating is enabled after the form is submitted
live: 'enabled',

// Locale in the format of languagecode_COUNTRYCODE
locale: 'en_US',

// Default invalid message
message: 'This value is not valid',

// The field will not be live validated if its length is less than this number of characters
threshold: null,

// Whether to be verbose when validating a field or not.
// Possible values:
// - true:  when a field has multiple validators, all of them will be checked, and respectively - if errors occur in
//  multiple validators, all of them will be displayed to the user
// - false: when a field has multiple validators, validation for this field will be terminated upon the first encountered error.
//  Thus, only the very first error message related to this field will be displayed to the user
verbose: true,

// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// These options mostly are overridden by specific framework
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

button: {
  // The submit buttons selector
  // These buttons will be disabled to prevent the valid form from multiple submissions
  selector: '[type="submit"]',

  // The disabled class
  disabled: ''
},

control: {
  // The CSS class for valid control
  valid: '',

  // The CSS class for invalid control
  invalid: ''
},

err: {
  // The CSS class of each message element
  clazz: '',

  // The error messages container. It can be:
  // - 'tooltip' if you want to use Bootstrap tooltip to show error messages
  // - 'popover' if you want to use Bootstrap popover to show error messages
  // - a CSS selector indicating the container
  // In the first two cases, since the tooltip/popover should be small enough, the plugin only shows only one error message
  // You also can define the message container for particular field
  container: null,

  // Used to determine where the messages are placed
  parent: null
},

// Shows ok/error/loading icons based on the field validity.
icon: {
  valid: null,
  invalid: null,
  validating: null,
  feedback: ''
},

row: {
  // The CSS selector for indicating the element consists of the field
  // You should adjust this option if your form group consists of many fields which not all of them need to be validated
  selector: null,
  valid: '',
  invalid: '',
  feedback: ''
}

Change logs:

v0.6.1 (2015-02-24)

• Add dataType, crossDomain, validKey options for remote validator.
• Add declarative option to support big form
• Add Netherlands phone validator
• Add Bulgarian zip code validator
• Add Bulgarian phone number validator
• Add Polish zip code and id validators
• Support custom framework
• Remote validator fails if Ajax request fails
• Update Netherlands phone number validator
• Add plugin instance to the 3rd parameter of transformer callback
• Add Grunt task that runs the jasmine test suites
• Bug Fixes

v0.6.0 (2015-01-06)

• Add setLocale() and getLocale() methods to support multiple languages
• Add validateContainer() method
• Add transformer option, allowing to hook the value of field before validating
• Support add-on
• Add UAE phone number validator
• Add EIN validator
• Add BIC (ISO 9362) validator
• Add err, icon, row options
• Support Zurb Foundation framework
• Add Spanish postal code validator, thanks to @ethernet-zero
• Support Spanish CIF validator, thanks to @ethernet-zero
• Support UI Kit framework
• Support Pure framework
• Support Yahoo Pure framework
• Remove hexColor validator. Use color validator instead
• Showing only one message each time
• Add Required icon
• Google reCAPTCHA add-on
• multilingual add-on
• Add option to set optional protocol in uri validator
• Add clazz option
• Improve identical validator, thanks to @jazzzz
• Show the credit card icon based on its type
• Showing tooltip/popover when moving over or clicking the feedback icon (Bootstrap 3.3.0)
• Use jQuery instead of window.jQuery
• Allow to reuse data which is returned by the validator
• Don't need to set the different validator for both fields
• Improve the CPF validator
• Support Foundation framework
• Bugs fix.
• Document update.
• Rename to Form Validation

v0.5.3 (2014-11-05)

• Add min, max options for the date validator,
• Add color validator
• The stringLength validator adds option to evaluate length in UTF-8 bytes
• Add trim option for the stringLength validator
• Add minFiles, maxFiles, minTotalSize, maxTotalSize options for the file validator
• Add France postal code validator
• Add Ireland postal code validator
• Add German phone number and postal code validators
• Add Portugal postal code validator
• Add autoFocus option
• Add Austria and Switzerland postal code validators
• The hexColor validator only accepts 6 hex character values when using HTML 5 type='color' attribute
• Comma separator handling in greaterThan, lessThan validators
• Replace ',' with '.' to validate decimal numbers correct
• Put tooltip/popover on bottom if there is not enough space on top
• The remote validator allows to set data options via HTML attributes
• Enable validator when setting data-bv-validatorname="data-bv-validatorname"
• Requires jQuery 1.9.1 or higher
• Update the stringLength document
• Add a notification about setting identical validator for both fields
• Add Using language package example
• Update the Changing the tooltip, popover's position example
• Add time validator example
• Add Rails usage for stringLength validator
• Fix the order of parameters for enableFieldValidators() method
• Fix mixed data/delay in remote doc
• Updated docs for added German postal code and phone number validators
• Fix Changing tooltip, popover's position example link
• Languages update

v0.5.2 (2014-09-25)

• Add verbose option
• Add blank validator
• Add init and destroy methods to validator
• Add Venezuelan VAT number (RIF) validator
• Add China phone number validator
• Add Venezuela phone number validator
• Add Romania phone number validator
• Add Romania postal code validator
• Add Denmark phone number validator
• Add Thailand phone number and ID validator
• Add Chinese citizen ID validator
• Add Russia phone number validator
• Add Russian postal code validator
• Add Czech and Slovakia phone number and postal code validators
• Add delay option to the remote validator
• he different validator allows more than a 2-way comparison
• The container option can be defined by a callback
• Use CSS classes instead of inline styling to fix icons with input-group
• The stringLength validator supports HTML 5 minlength attribute
• The emailAddress validator accepts multiple email addresses
• Reuse data returned by callback, remote, custom validators
• The uri validator adds support for custom protocol
• Support VAT number without prefixing by country code
• Support latest Bootstrap when using tooltip/popover to show the message
• Improve behaviour of the different validator
• Add "BootstrapValidator's JavaScript requires jQuery" warning
• Add minSize option for the file validator
• Add phone number validator test suite
• Add Bootstrap Select and Select2 examples
• Add TinyMCE example
• Add Changing tooltip/popover position example
• Bugs fixed.
• Add more Language Packages.

v0.5.1 (2014-08-22)

• Add meid validator, thanks to @troymccabe
• Add imo validator, thanks to @troymccabe
• Add French phone number validator, thanks to @dlucazeau
• Add Spanish phone number validator, thanks to @vadail
• Add Iceland VAT number validator, thanks to @evilchili
• Add Pakistan phone number validator, thanks to @abuzer
• Add event name options to avoid window.onerror being invoked by jQuery, thanks to @roryprimrose. 
• Add South African VAT number validator, thanks to @evilchili
• Add Brazilian phone number and postal code validator, thanks to @fhferreira
• Add zipCode and phone number validators for Morocco, thanks to @Arkni
• Add Brazilian VAT number validator, thanks to @fhferreira

v0.5.0 (2014-07-14)

• Major update.
• See CHANGELOG.md.

v0.4.5 (2014-05-15)

• Add $.fn.bootstrapValidator.helpers.date for validating a date, re-used in date, id, vat validators
• Add threshold option
• Add id validator
• Add separator option to the numeric validator
• Add isin (International Securities Identification Number) validator
• Add rtn (Routing transit number) validator
• Add cusip (North American Securities) validator
• Add sedol (Stock Exchange Daily Official List) validator
• The zipCode validator adds support for Italian, Dutch postcodes
• The cvv validator should support spaces in credit card, thanks to @evilchili
• Change default submitButtons to [type="submit"] to support input type="submit"
• Fix the conflict issue with MooTools
• The submit buttons are not sent
• The iban validator does not work on IE8
• Plugin method invocation don't work
• Fix the issue that the hidden fields generated by other plugins might not be validated
• When parsing options from HTML attributes, don't add the field which hasn't validators. 

v0.4.5 (2014-05-07)

• Add threshold option
• When parsing options from HTML attributes, don't add the field which hasn't validators. 
• Add id validator

v0.4.4 (2014-05-05)

• Add $.fn.bootstrapValidator.helpers.mod_11_10 method that implements modulus 11, 10 (ISO 7064) algorithm. The helper is then reused in validating German and Croatian VAT numbers
• Add $.fn.bootstrapValidator.helpers.mod_37_36 method that implements modulus 37, 36 (ISO 7064) algorithm, used in GRid validator
• Add EAN (International Article Number) validator
• Add GRId (Global Release Identifier) validator
• Add IMEI (International Mobile Station Equipment Identity) validator
• Add ISMN (International Standard Music Number) validator
• Add ISSN (International Standard Serial Number) validator
• Support using both the name attribute and selector option for field
• Indicate success/error tab
• Add UK postcode support for the zipCode validator
• The date validator supports seconds
• Wrong prefix of Laser credit card number

v0.4.3 (2014-04-26)

• Add file validator
• Add vat validator, support 32 countries
• Add Canadian Postal Code support for the zipCode validator, thanks to @Francismori7
• The choice validator supports select element
• Activate tab containing the first invalid field
• Plugin method invocation
• IE8 error
• The excluded: ':disabled' setting does not work on IE 8, thanks to @adgrafik
• The isbn validator accepts letters and special characters

v0.4.2 (2014-04-19)

• Add siren and siret validators
• Add Vehicle Identification Number (VIN) validator
• Add excluded option
• The phone validator now supports +1 country code and area code for US phone number
• The remote validator allows to override name option
• Do not validate fields that enabled is set to false
• Improve zipCode validator

v0.4.1 (2014-04-12)

• Fixed an issue that the custom submit handler is not fired from the second time
• Prevent the validate() method from submit the form automatically. So we can call validate() to validate the form
• Doesn't trigger validation on the first focus
• The row state is now only marked as success if all fields on it are valid
• Added support for element outside of form using the selector option
• User doesn't need to submit the form twice when remote validator complete
• Fix errors in IE 8
• The phone validator now also checks the length of US phone number

v0.4.0 (2014-04-03)

• Set validator option by using HTML 5 attributes (data-bv-*)
• Support HTML 5 input types
• Support multiple elements with the same name
• Add setLiveMode() method to turn on/off the live validating mode
• Add iban validator for validating IBAN (International Bank Account Number)
• Add uuid validator, support UUID v3, v4, v5
• Add numeric validator
• Add integer validator
• Add hex validator
• Add stringCase validator to check a string is lower or upper case
• Other improvements and fixes.

v0.3.3 (2014-03-27)

• FIXED: Don't validate disabled element
• FIXED: Cannot call form.submit() inside submitHandler
• FIXED: notEmpty validator doesn't work on file input
• FIXED: Handle case where a field is removed after the bootstrap validation

v0.3.2 (2014-03-21)

• Add selector option for each field. The field can be defined by CSS validator instead of the name attribute
• Add container option for each field to indicate where the error messages are shown
• Add ip validator. Support both IPv4 and IPv6
• Add isbn validator, support both ISBN 10 and ISBN 13
• Add step validator
• Add mac validator
• Add base64 validator
• Add cvv validator
• Add phone validator. Support US phone number only, thanks to @gercheq

v0.3.1 (2014-03-17)

• Add date validator
• Improve updateStatus() method to make the plugin play well with another
• Add enabled option and enableFieldValidators() method to enable/disable all validators to given field
• Add bower.json file, thanks to @ikanedo
• Support more form controls on the same row
• Remove the columns option. Now the plugin works normally no matter how many columns the form uses
• The resetForm method now only resets fields with validator rules
• FIXED: The error messages aren't shown if the form field doesn't have label
• FIXED: submitHandler or default submission isn't called after remote validation completes

2014-03-13

• Add date validator
• Add setNotValidated() method to make the plugin play well with another
• Add enabled option and enableFieldValidators() method to enable/disable all validators to given field
• Add bower.json file
• Support more form controls on the same row
• Remove the columns option
• Fixes: The error messages aren't shown if the form field doesn't have label
• Fixes: submitHandler or default submission isn't called after remote validation completes

2014-03-10

• Rewrite entirely using Deferred
• Add choice validator
• The remote validator supports dynamic data
• Add method to validate form manually
• Disable submit button on successful form submit
• Add submit button to submitHandler() parameter
• Add optional feedback icons
• Support Danish zip code
• Support Sweden zip code
• Support custom grid columns
• Show all errors
• Add resetForm() method

2014-03-08

• update

2014-02-17

• fixed validation for checkboxes

2014-02-14

• Fixed: Don't validate disabled element
• Fixed: Callback validator does not process if the field is empty

2014-02-07

• bugs fixed.

2014-01-23

•  Fix the issue when the form label doesn't have class

v0.2.2 (2014-01-17)

• Focus to the first invalid element
• remote validator: Allow to set additional data to remote URL
• Avoid from calling form submit recursively
• Validate existing fields only

---

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