Lightweight Form Validation Plugin For jQuery and Bootstrap - jbootvalidator

jbootvalidator is a lightweight and simple to use jQuery & Boostrap plugin for validating form fields users input using custom data validation patterns.

See also:

• Powerful Form Validation Plugin For jQuery and Bootstrap 3
• Simple jQuery Form Validation Plugin with jQuery UI and Bootstrap - ETFormValidation

How to use it:

1. Include the jQuery jbootvalidator plugin on the web page, after jQuery library.

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

2. Include the required Twitter Bootstrap 3's javascript and CSS on the page.

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

3. Create form fields and custom the data validation patterns.

<input type="text" id="age" name="age"
class="form-control"
pattern="\d+"
autocomplete="off"
title="Numbers only please." placeholder="Age" required>

4. Create 2 containers to display error and success information.

<div id="error" style="display:none" class="alert alert-danger"> You've got problems. </div>
<div id="victory" style="display:none" class="alert alert-success"> Victory! </div>

5. Initialize the plugin with options and callbacks.

<script>
var callback = function (form, e) {
e.preventDefault();
if ($('form').find('.form-group.has-error').length > 0) {
$('#error').show();
$('#victory').hide();
} else {
$('#error').hide();
$('#victory').show();
}
return false;
};
$('form').jBootValidator({
validateOnSubmit: true, 
validationCallback: callback
});
</script>

Change log:

v0.4.2 (2014-07-04)

• upgrade to latest version 

---

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