BootstrapValidator is the jQuery plugin to validate form fields, designed to use with Bootstrap 3, developed by nghuuphuoc
The BootstrapValidator plugin is a jquery plugin by nghuuphuoc. Its purpose is to perform client-side form fields validation of user entered data specifically designed to use with twitter-bootstrap-3 framework.
Useful Links:
Stack Snippet Starter Pack:
HTML - Include the plugin script someplace after the jQuery and Bootstrap library(s):
(Use CDN links or host the scripts yourself)
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.css"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.js"></script>
<form id="Form" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="fullName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Email address</label>
<div class="col-md-6">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-3 col-md-8">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
$(document).ready(function() { //<-- ensure form's HTML is ready
$('#Form').bootstrapValidator({ //<-- initialize plugin on the form.
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: { // <-- this is the name attribute, NOT id
validators: {
notEmpty: {
message: 'The username is required and cannot be empty'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email is required and cannot be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
}
}
});
});
jsFiddle Demo: http://jsfiddle.net/5hfyd40x/
API: http://bv.doc.javake.cn/api/
Develop new validator: http://bv.doc.javake.cn/developing/
