This example illustrates the ability of setting validator options via HTML attributes.
In order to set a specific validator to given field, you have to declare additional attributes for the field. For example:
<input
data-bv-{validatorname}
data-bv-{validatorname}-{validatoroption}="..." />Here are some important points when setting the attributes for field:
{validatorname} and {validatoroption} must be lowercase.data-bv-{validatorname} or data-bv-{validatorname}="true" to enable particular validator for field.data-bv-{validatorname}="false" to disable the validator.If there are multiple elements having the same name, you just need to set the HTML attribute to one of them. For example:
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="radio">
<label>
<input type="radio" name="gender" value="male"
data-bv-notempty data-bv-notempty-message="The gender is required" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div><form id="attributeForm" method="post" class="form-horizontal"
data-bv-message="This value is not valid"
data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" placeholder="First name"
data-bv-notempty="true"
data-bv-notempty-message="The first name is required and cannot be empty" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name"
data-bv-notempty="true"
data-bv-notempty-message="The last name is required and cannot be empty" />
</div>
</div>
<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"
data-bv-message="The username is not valid"
data-bv-notempty="true"
data-bv-notempty-message="The username is required and cannot be empty"
data-bv-regexp="true"
data-bv-regexp-regexp="[a-zA-Z0-9_\.]+"
data-bv-regexp-message="The username can only consist of alphabetical, number, dot and underscore"
data-bv-stringlength="true"
data-bv-stringlength-min="6"
data-bv-stringlength-max="30"
data-bv-stringlength-message="The username must be more than 6 and less than 30 characters long"
data-bv-different="true"
data-bv-different-field="password"
data-bv-different-message="The username and password cannot be the same as each other" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input class="form-control" name="email" type="email"
data-bv-emailaddress="true"
data-bv-emailaddress-message="The input is not a valid email address" />
</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"
data-bv-notempty="true"
data-bv-notempty-message="The password is required and cannot be empty"
data-bv-identical="true"
data-bv-identical-field="confirmPassword"
data-bv-identical-message="The password and its confirm are not the same"
data-bv-different="true"
data-bv-different-field="username"
data-bv-different-message="The password cannot be the same as username" />
</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"
data-bv-notempty="true"
data-bv-notempty-message="The confirm password is required and cannot be empty"
data-bv-identical="true"
data-bv-identical-field="password"
data-bv-identical-message="The password and its confirm are not the same"
data-bv-different="true"
data-bv-different-field="username"
data-bv-different-message="The password cannot be the same as username" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Languages</label>
<div class="col-lg-5">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="english"
data-bv-message="Please specify at least one language you can speak"
data-bv-notempty="true" /> English
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="french" /> French
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="german" /> German
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="russian" /> Russian
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="other" /> Other
</label>
</div>
</div>
</div>
</form><script>
$(document).ready(function() {
$('#attributeForm').bootstrapValidator();
});
</script>BootstrapValidator supports a few of HTML 5 types, attributes listed as following:
| HTML 5 attribute | Equivalent validator | Equivalent HTML attribute |
|---|---|---|
min="..." |
greaterThan validator |
|
max="..." |
lessThan validator |
|
maxlength="..." |
stringLength validator |
|
pattern="..." |
regexp validator |
|
required |
notEmpty validator | data-bv-notempty="true" |
type="color" |
hexColor validator | data-bv-hexcolor="true" |
type="email" |
emailAddress validator | data-bv-emailaddress="true" |
|
between validator | |
type="url" |
uri validator | data-bv-uri="true" |
<form id="html5Form" method="post" class="form-horizontal"
data-bv-message="This value is not valid"
data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
<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"
data-bv-message="The username is not valid"
required
data-bv-notempty-message="The username is required and cannot be empty"
pattern="[a-zA-Z0-9]+"
data-bv-regexp-message="The username can only consist of alphabetical, number" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Email address</label>
<div class="col-lg-5">
<input class="form-control" name="email"
required
type="email" data-bv-emailaddress-message="The input is not a valid email address" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Website</label>
<div class="col-lg-5">
<input class="form-control" name="website"
required
type="url" data-bv-uri-message="The input is not a valid website address" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Fav color</label>
<div class="col-lg-3">
<input class="form-control" name="color"
required
type="color" data-bv-hexcolor-message="The input is not a valid color code" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Age</label>
<div class="col-lg-2">
<input type="text" class="form-control" name="age"
required
min="10"
data-bv-greaterthan-inclusive="false"
data-bv-greaterthan-message="The input must be greater than or equal to 10"
max="100"
data-bv-lessthan-inclusive="true"
data-bv-lessthan-message="The input must be less than 100" />
<!--<input class="form-control" name="age"
required
type="range"
min="10"
max="100"
data-bv-between-message="The input must be between 10 and 100" />-->
</div>
</div>
</form><script type="text/javascript">
$(document).ready(function() {
$('#html5Form').bootstrapValidator();
});
</script>It's possible to use the plugin with a form which is placed inside a Bootstrap Modal.
<button class="btn btn-primary" data-toggle="modal" data-target="#loginModal">Login</button>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<!-- The form is placed inside the body of modal -->
<form id="loginForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Username</label>
<div class="col-md-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Password</label>
<div class="col-md-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-3">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div><script>
$(document).ready(function() {
$('#loginForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script>If you use HTML attributes to set the validator options, or HTML5 input elements, you must set excluded: [':disabled'].
By default, the plugin will not initialize the fields which are disabled, hidden, or not visible. Since the form is placed inside a model which is not visible after loading page, the fields/bootstrap-validator/validators initialized with HTML attributes might be ignored.
That's the reason why we need to set excluded: [':disabled']. Take a look at the excluded setting for more information.
<script>
$(document).ready(function() {
$('#loginForm').bootstrapValidator({
message: 'This value is not valid',
excluded: [':disabled'],
...
});
});
</script>In the case you want to use Ajax to submit the form and perform additional tasks after that, you can use submitHandler option.
Regard to our modal example, the following code shows how to:
<script>
$(document).ready(function() {
$('#loginForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
$.post(form.attr('action'), form.serialize(), function(result) {
// The result is a JSON formatted by your back-end
// I assume the format is as following:
// {
// valid: true, // false if the account is not found
// username: 'Username', // null if the account is not found
// }
if (result.valid == true || result.valid == 'true') {
// You can reload the current location
window.location.reload();
// Or use Javascript to update your page, such as showing the account name
// $('#welcome').html('Hello ' + result.username);
} else {
// The account is not found
// Show the errors
$('#errors').html('The account is not found').removeClass('hide');
// Enable the submit buttons
$('#loginForm').bootstrapValidator('disableSubmitButtons', false);
}
}, 'json');
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script>If you want to reset all the fields in form whenever the modal is shown, the resetForm() method will help you:
$('#loginModal').on('show.bs.modal', function() {
$('#loginForm').bootstrapValidator('resetForm', true);
});BootstrapValidator does not validate the fields which:
The following example shows an example of toggling field validator.
Try to click the Add more info or Add more phone numbers button to enable/disable the additional fields. Also, look at state of the Validate button based on the validity of additional fields.
<form id="togglingForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Full name <sup>*</sup></label>
<div class="col-lg-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-lg-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Company <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="company"
required data-bv-notempty-message="The company name is required" />
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-info btn-sm" data-toggle="#jobInfo">
Add more info
</button>
</div>
</div>
<!-- These fields will not be validated as long as they are not visible -->
<div id="jobInfo" style="display: none;">
<div class="form-group">
<label class="col-lg-3 control-label">Job title <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="job" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Department <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="department" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Mobile phone <sup>*</sup></label>
<div class="col-lg-5">
<input type="text" class="form-control" name="mobilePhone" />
</div>
<div class="col-lg-2">
<button type="button" class="btn btn-info btn-sm" data-toggle="#phoneInfo">
Add more phone numbers
</button>
</div>
</div>
<!-- These fields will not be validated as long as they are not visible -->
<div id="phoneInfo" style="display: none;">
<div class="form-group">
<label class="col-lg-3 control-label">Home phone</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="homePhone" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Office phone</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="officePhone" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form><script>
$(document).ready(function() {
$('#togglingForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
// Do nothing
},
fields: {
firstName: {
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
company: {
validators: {
notEmpty: {
message: 'The company name is required'
}
}
},
// These fields will be validated when being visible
job: {
validators: {
notEmpty: {
message: 'The job title is required'
}
}
},
department: {
validators: {
notEmpty: {
message: 'The department name is required'
}
}
},
mobilePhone: {
validators: {
notEmpty: {
message: 'The mobile phone number is required'
},
digits: {
message: 'The mobile phone number is not valid'
}
}
},
// These fields will be validated when being visible
homePhone: {
validators: {
digits: {
message: 'The home phone number is not valid'
}
}
},
officePhone: {
validators: {
digits: {
message: 'The office phone number is not valid'
}
}
}
}
})
.find('button[data-toggle]')
.on('click', function() {
var $target = $($(this).attr('data-toggle'));
// Show or hide the additional fields
// They will or will not be validated based on their visibilities
$target.toggle();
if (!$target.is(':visible')) {
// Enable the submit buttons in case additional fields are not valid
$('#togglingForm').data('bootstrapValidator').disableSubmitButtons(false);
}
});
});
</script>The following example shows that the plugin works perfectly with Bootstrap Tabs.
By default, the fields in inactive tabs will not be validated because they are not visible. In order to validate them, we need to use the excluded option:
excluded: [':disabled']<form id="accountForm" method="post" class="form-horizontal">
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="form-group">
<label class="col-lg-3 control-label">Full name</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="fullName" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Company</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="company" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Job title</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="jobTitle" />
</div>
</div>
</div>
<div class="tab-pane" id="address-tab">
<div class="form-group">
<label class="col-lg-3 control-label">Address</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="address" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">City</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="city" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Country</label>
<div class="col-lg-5">
<select class="form-control" name="country">
<option value="">Select a country</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="IT">Italy</option>
<option value="JP">Japan</option>
<option value="RU">Russian</option>
<option value="US">United State</option>
<option value="GB">United Kingdom</option>
<option value="other">Other</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form><script>
$(document).ready(function() {
$('#accountForm')
.bootstrapValidator({
// Only disabled elements are excluded
// The invisible elements belonging to inactive tabs must be validated
excluded: [':disabled'],
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullName: {
validators: {
notEmpty: {
message: 'The full name is required'
}
}
},
company: {
validators: {
notEmpty: {
message: 'The company name is required'
}
}
},
address: {
validators: {
notEmpty: {
message: 'The address is required'
}
}
},
city: {
validators: {
notEmpty: {
message: 'The city is required'
}
}
}
}
});
});
</script>It's possible to validate multiple fields with the same name. The fields can be radio buttons, checkboxes or text boxes, etc.
<form id="multipleForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Favourite browser</label>
<div class="col-lg-5">
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="chrome" /> Google Chrome
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="firefox" /> Firefox
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="ie" /> IE
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="safari" /> Safari
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="opera" /> Opera
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="browsers[]" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Editors</label>
<div class="col-lg-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-5">
<input class="form-control" type="text" name="editors[]" />
</div>
</div>
<div class="form-group">
<div class="col-lg-9 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form><script>
$(document).ready(function() {
$('#multipleForm')
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function(validator, form, submitButton) {
// Do nothing
},
fields: {
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
'browsers[]': {
validators: {
notEmpty: {
message: 'Please specify at least one browser you use daily for development'
}
}
},
'editors[]': {
validators: {
notEmpty: {
message: 'The editor names are required'
}
}
}
}
});
});
</script>These examples show how you can use BootstrapValidator with other Javascript plugins.
Use with the Bootstrap Multiselect plugin.
The Browser option requires to choose 2-3 browsers.
<!-- Include Bootstrap Multiselect CSS -->
<link rel="stylesheet" href="/bootstrap-validator/vendor/bootstrap-multiselect/css/bootstrap-multiselect.css" />
<form id="multiselectForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Gender</label>
<div class="col-lg-5">
<select class="form-control" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Browser</label>
<div class="col-lg-5">
<select class="form-control" name="browsers" multiple>
<option value="chrome">Google Chrome</option>
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="safari">Safari</option>
<option value="opera">Opera</option>
<option value="other">Other</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form><!-- Include Bootstrap Multiselect JS -->
<script src="/bootstrap-validator/vendor/bootstrap-multiselect/js/bootstrap-multiselect.js"></script>
<script>
$(document).ready(function() {
$('#multiselectForm')
.find('[name="gender"]')
.multiselect()
.end()
.find('[name="browsers"]')
.multiselect({
// Re-validate the multiselect field when it is changed
onChange: function(element, checked) {
$('#multiselectForm')
.data('bootstrapValidator') // Get plugin instance
.updateStatus('browsers', 'NOT_VALIDATED') // Update field status
.validateField('browsers'); // and re-validate it
}
})
.end()
.bootstrapValidator({
// Exclude only disabled fields
// The invisible fields set by Bootstrap Multiselect must be validated
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
browsers: {
validators: {
callback: {
message: 'Please choose 2-3 browsers you use for developing',
callback: function(value, validator) {
// Get the selected options
var options = validator.getFieldElements('browsers').val();
return (options != null && options.length >= 2 && options.length <= 3);
}
}
}
}
}
});
});
</script>Use with the Chosen plugin.
The Favorite color option requires to choose 2-4 colors you like most.
<!-- Include chosen CSS -->
<link rel="stylesheet" href="/bootstrap-validator/vendor/chosen/chosen.min.css" />
<style type="text/css">
#chosenForm .chosen-choices {
border: 1px solid #ccc;
border-radius: 4px;
min-height: 34px;
padding: 6px 12px;
}
#chosenForm .form-control-feedback {
/* To make the feedback icon visible */
z-index: 100;
}
</style>
<form id="chosenForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Favorite color</label>
<div class="col-lg-5">
<select name="colors" class="form-control chosen-select"
multiple data-placeholder="Choose 2-4 colors">
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="orange">Orange</option>
<option value="red">Red</option>
<option value="yellow">Yellow</option>
<option value="white">White</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form><!-- Include choosen JS -->
<script src="/bootstrap-validator/vendor/chosen/chosen.jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#chosenForm')
.find('[name="colors"]')
.chosen()
// Re-validate the color when it is changed
.change(function(e) {
$('#chosenForm')
.data('bootstrapValidator')
.updateStatus('colors', 'NOT_VALIDATED')
.validateField('colors');
})
.end()
.bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
colors: {
validators: {
callback: {
message: 'Please choose 2-4 color you like most',
callback: function(value, validator) {
// Get the selected options
var options = validator.getFieldElements('colors').val();
return (options != null && options.length >= 2 && options.length <= 4);
}
}
}
}
}
});
});
</script>Use with the iCheck plugin.
<!-- Include iCheck skin -->
<link rel="stylesheet" href="/bootstrap-validator/vendor/icheck/skins/square/red.css" />
<!-- Set the radio/checkbox positon properly -->
<style type="text/css">
#icheckForm .radio, #icheckForm .checkbox {
padding-left: 0;
}
</style>
<form id="icheckForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Job position</label>
<div class="col-lg-5">
<div class="radio">
<label>
<input type="radio" name="job" value="designer" /> Designer
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="frontend" /> Front-end Developer
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="backend" /> Back-end Developer
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="dba" /> Database Administrator
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="sys" /> System Engineer
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Programming Languages</label>
<div class="col-lg-5">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="net" /> .Net
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="java" /> Java
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="c" /> C/C++
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="php" /> PHP
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="perl" /> Perl
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="ruby" /> Ruby
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="python" /> Python
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="javascript" /> Javascript
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form><!-- Include iCheck plugin -->
<script src="/bootstrap-validator/vendor/icheck/icheck.min.js"></script>
<script>
$(document).ready(function() {
$('#icheckForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
job: {
validators: {
notEmpty: {
message: 'The job position is required'
}
}
},
'languages[]': {
validators: {
choice: {
min: 2,
max: 4,
message: 'Please choose 2 - 4 programming languages you are good at'
}
}
}
}
})
.find('input[name="job"], input[name="languages[]"]')
// Init iCheck elements
.iCheck({
checkboxClass: 'icheckbox_square-red',
radioClass: 'iradio_square-red'
})
// Called when the radios/checkboxes are changed
.on('ifChanged', function(e) {
// Get the field name
var field = $(this).attr('name');
$('#icheckForm')
// Mark the field as not validated
.bootstrapValidator('updateStatus', field, 'NOT_VALIDATED')
// Validate field
.bootstrapValidator('validateField', field);
});
});
</script>Use with the Mask plugin.
<form id="maskForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">IP address</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="ipAddress" />
</div>
</div>
</form><!-- Include Mask plugin -->
<script src="/bootstrap-validator/vendor/mask/jquery.mask.min.js"></script>
<script>
$(document).ready(function() {
$('#maskForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
ipAddress: {
validators: {
ip: {
message: 'The IP address is not valid'
}
}
}
}
})
.find('[name="ipAddress"]').mask('099.099.099.099');
});
</script>Use with the Raty plugin. At first, try to click the Validate button to validate the form. Then click the Rating, fill in other fields, and click the Validate button again to see that the Rating is validated.
<form id="ratyForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Rating</label>
<div class="col-lg-5">
<div id="ratyRating"></div>
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Review title</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Your review</label>
<div class="col-lg-5">
<textarea rows="5" class="form-control" name="content"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-5 col-lg-offset-3">
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
</form><!-- Include Raty JS file -->
<script src="/bootstrap-validator/vendor/raty/jquery.raty.min.js"></script>
<script>
$(document).ready(function() {
// Raty example
$('#ratyRating').raty({
path: '/bootstrap-validator/vendor/raty/img',
size: 24,
// The name of hidden field generated by Raty
scoreName: 'star',
// Re-validate the star rating whenever user change it
click: function (score, evt) {
$('#ratyForm')
.data('bootstrapValidator') // Return the bootstrapValidator instance
.updateStatus('star', 'NOT_VALIDATED') // Mark the star field as not validated yet
.validateField('star'); // Validate it again
}
});
$('#ratyForm')
.bootstrapValidator({
// The disabled elements are excluded
// Hidden elements (including the rating star) are included
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
star: {
validators: {
notEmpty: {
message: 'The rating is required'
}
}
},
title: {
validators: {
notEmpty: {
message: 'The review title is required'
}
}
},
content: {
validators: {
notEmpty: {
message: 'The review content is required'
},
stringLength: {
max: 200,
message: 'The review content must be less than 200 characters'
}
}
}
}
});
});
</script>
Comments
If you want to report a bug, please submit the issue on Github. Do NOT post the issue here.
For a general question or feedback, use the form below.