This page describes the public methods provided by the plugin.
After initializing the form with the plugin using $(form).bootstrapValidator(options), there are two ways to call the plugin method:
// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)
or:
$(form).bootstrapValidator(methodName, parameters);The first way mostly returns the BootstrapValidator instance, meanwhile the second one always returns the jQuery object representing the form.
So, it's possible to chain methods as below:
// The first way
$(form)
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED')
.validateField('birthday');
// The second one
$(form)
.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'birthday');defaultSubmit() — Submit the form using default submission.
It also does not perform any validations when submitting the form. It might be used when you want to submit the form right inside the custom submit handler.
enableFieldValidators(field, enabled) — Enable/disable all validators to given field
| Parameter | Type | Description |
|---|---|---|
field |
String | The field name |
enabled |
Boolean | If true, enable field validators. If false, disable field validators |
getFieldElements(field) — Retrieve the field elements by given name.
Returns array of jQuery element representing the field, or null if the fields are not found.
| Parameter | Type | Description |
|---|---|---|
field |
String | The field name |
isValid() — Returns true if all form fields are valid. Otherwise, returns false.
Ensure that the validate method is already called after calling this one.
resetForm(resetFormData) — Reset form. It hides all error elements and feedback icons. All the fields are marked as not validated yet.
| Parameter | Type | Description |
|---|---|---|
resetFormData |
Boolean | If true, the method resets the fields which have validator rules. |
$(form).bootstrapValidator(options);
$(form).data('bootstrapValidator').resetForm();updateElementStatus($field, status, validatorName) — Update validating result of given element
| Parameter | Type | Description |
|---|---|---|
$field |
jQuery | The field element |
status |
String | Can be NOT_VALIDATED, VALIDATING, INVALID or VALID |
validatorName |
String | The validator name. If null, the method updates validity result for all validators |
updateStatus(field, status, validatorName) — Update validator result for given field
| Parameter | Type | Description |
|---|---|---|
field |
String | The field name |
status |
String | Can be NOT_VALIDATED, VALIDATING, INVALID or VALID |
validatorName |
String | The validator name. If null, the method updates validity result for all validators |
This method is useful when you want to use BootstrapValidator with other plugins such as Bootstrap Date Picker, Boostrap Datetime Picker, Select2, etc.
By default, the plugin doesn't re-validate a field once it is already validated and marked as a valid one. When using with other plugins, the field value is changed and therefore need to be re-validated.
The following example describes how to re-validate a field which uses with Boostrap Datetime Picker:
<link href="/bootstrap-validator/vendor/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<form id="datetimeForm" method="post" class="form-horizontal">
...
<div class="form-group">
<label class="col-lg-3 control-label">DateTime Picker</label>
<div class="col-lg-5">
<div class="input-group date" id="datetimePicker">
<input type="text" class="form-control" name="datetimePicker" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
...
</form><script src="/bootstrap-validator/vendor/momentjs/moment.min.js"></script>
<script src="/bootstrap-validator/vendor/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(document).ready(function() {
$('#datetimePicker').datetimepicker();
$('#datetimeForm').bootstrapValidator({
fields: {
...
datetimePicker: {
validators: {
notEmpty: {
message: 'The date is required and cannot be empty'
},
date: {
format: 'MM/DD/YYYY h:m A'
}
}
}
}
});
$('#datetimePicker')
.on('dp.change dp.show', function(e) {
// Validate the date when user change it
$('#datetimeForm')
// Get the bootstrapValidator instance
.data('bootstrapValidator')
// Mark the field as not validated, so it'll be re-validated when the user change date
.updateStatus('datetimePicker', 'NOT_VALIDATED', null)
// Validate the field
.validateField('datetimePicker');
});
});
</script>The updateStatus method might be used when a field validity is effected by other filed.
For example, the form below asks user for credit card expiration. The expiration is valid if it is in the range of next month and next 10 year.
<form id="paymentForm" class="form-horizontal">
<div class="form-group">
<label class="col-lg-3 control-label">Expiration</label>
<div class="col-lg-2">
<input type="text" class="form-control" placeholder="Month" name="expMonth" />
</div>
<div class="col-lg-2">
<input type="text" class="form-control" placeholder="Year" name="expYear" />
</div>
</div>
</form><script>
$(document).ready(function() {
$('#paymentForm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
expMonth: {
validators: {
notEmpty: {
message: 'The expiration month is required'
},
digits: {
message: 'The expiration month can contain digits only'
},
callback: {
message: 'Expired',
callback: function(value, validator) {
value = parseInt(value, 10);
var year = validator.getFieldElements('expYear').val(),
currentMonth = new Date().getMonth() + 1,
currentYear = new Date().getFullYear();
if (value < 0 || value > 12) {
return false;
}
if (year == '') {
return true;
}
year = parseInt(year, 10);
if (year > currentYear || (year == currentYear && value > currentMonth)) {
validator.updateStatus('expYear', 'VALID');
return true;
} else {
return false;
}
}
}
}
},
expYear: {
validators: {
notEmpty: {
message: 'The expiration year is required'
},
digits: {
message: 'The expiration year can contain digits only'
},
callback: {
message: 'Expired',
callback: function(value, validator) {
value = parseInt(value, 10);
var month = validator.getFieldElements('expMonth').val(),
currentMonth = new Date().getMonth() + 1,
currentYear = new Date().getFullYear();
if (value < currentYear || value > currentYear + 10) {
return false;
}
if (month == '') {
return false;
}
month = parseInt(month, 10);
if (value > currentYear || (value == currentYear && month > currentMonth)) {
validator.updateStatus('expMonth', 'VALID');
return true;
} else {
return false;
}
}
}
}
}
}
});
});
</script>validate() — Validate form manually. It is useful when you want to validate form by clicking a button or a link instead of a submit buttons.
$(form).bootstrapValidator(options).bootstrapValidator('validate');
// or
$(form).bootstrapValidator(options);
$(form).data('bootstrapValidator').validate();validateField(field) — Validate field.
| Parameter | Type | Description |
|---|---|---|
field |
String | The field name |
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.