By triggering events, you can adjust a few of the default behaviours as in the following sections.
By default, the submit buttons will be disabled if there is at least one invalid field.
If you want to enable the submit buttons all the time, triggering the status.field.bv event and using the disableSubmitButtons() method:
<form id="enableButtonForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Task</label>
<div class="col-md-5">
<input type="text" class="form-control" name="task" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Description</label>
<div class="col-md-5">
<textarea class="form-control" name="description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Priority</label>
<div class="col-md-5">
<select class="form-control" name="priority" style="width: 200px;">
<option value="">Choose the priority</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>$(document).ready(function() {
$('#enableButtonForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
task: {
validators: {
notEmpty: {
message: 'The task is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'The description is required'
}
}
},
priority: {
validators: {
notEmpty: {
message: 'The priority is required'
}
}
}
}
})
.on('status.field.bv', function(e, data) {
// $(e.target) --> The field element
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
data.bv.disableSubmitButtons(false);
});
});If you want the submit button to be enabled only after clicking it, use the getSubmitButton() method to check whether or not the submit button is clicked:
$(document).ready(function() {
$('#enableButtonForm')
.bootstrapValidator({
...
})
.on('status.field.bv', function(e, data) {
if (data.bv.getSubmitButton()) {
data.bv.disableSubmitButtons(false);
}
});
});Based on the field status, the field and its container are marked as success or error element. The plugin will add has-success or has-error class to the container element.
If you think that it's better to indicate error status only due to the similarity of these status colors, you can remove has-success class from the container.
It can be done by triggering the success.field.bv event as below:
<style type="text/css">
/* Adjust feedback icon position */
#hidingSuccessForm .has-feedback .form-control-feedback {
top: 35px;
}
</style>
<form id="hidingSuccessForm" method="post">
<div class="form-group">
<label>Proposal title</label>
<input type="text" class="form-control" name="title" />
</div>
<div class="form-group">
<label>Abstract</label>
<textarea class="form-control" name="abstract" rows="5"></textarea>
</div>
<div class="form-group">
<label>Topics</label>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="angularjs" /> AngularJS
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="backbone" /> Backbone
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="emberjs" /> EmberJS
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="jquery" /> jQuery
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="topics[]" value="nodejs" /> NodeJS
</label>
</div>
</div>
<div class="form-group">
<label>Session type</label>
<select class="form-control" name="sessionType" style="width: 200px;">
<option value="">Choose the session type</option>
<option value="presentation">Presentation</option>
<option value="panel">Panel</option>
<option value="workshop">Workshop</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</form>$(document).ready(function() {
$('#hidingSuccessForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'The title is required'
}
}
},
abstract: {
validators: {
notEmpty: {
message: 'The abstract is required'
},
stringLength: {
max: 400,
message: 'The abstract must be less than 400 characters'
}
}
},
'topics[]': {
validators: {
notEmpty: {
message: 'The topic is required'
},
choice: {
min: 2,
max: 3,
message: 'Please choose 2 - 3 topics'
}
}
},
sessionType: {
validators: {
notEmpty: {
message: 'The session type is required'
}
}
}
}
})
.on('success.field.bv', function(e, data) {
// $(e.target) --> The field element
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
var $parent = data.element.parents('.form-group');
// Remove the has-success class
$parent.removeClass('has-success');
// Hide the success icon
$parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]').hide();
});
});In order to archive this, there are two things you need to know:
$field.data('bv.messages')<style type="text/css">
/* Adjust feedback icon position */
#reportForm .has-feedback .form-control-feedback {
right: -30px;
}
</style>
<form id="reportForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Bug title</label>
<div class="col-md-6">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Description</label>
<div class="col-md-6">
<textarea class="form-control" name="description" rows="8"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Operating system</label>
<div class="col-md-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="os" value="window7" /> Window 7
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="window8" /> Window 8
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="centos" /> Centos
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="fedora" /> Fedora
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="ubuntu" /> Ubuntu
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="macos" /> Mac OS X
</label>
<label class="btn btn-default">
<input type="radio" name="os" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Browser(s)</label>
<div class="col-md-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="ie8" /> IE 8
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="ie9" /> IE 9
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="ie10" /> IE 10
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="chrome" /> Chrome
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="firefox"> Firefox
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="safari" /> Safari
</label>
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="opera"> Opera
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Priority</label>
<div class="col-md-3">
<select class="form-control" name="priority">
<option value="">Choose the priority</option>
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-3">
<button type="submit" class="btn btn-default">Report issue</button>
</div>
</div>
</form>$(document).ready(function() {
$('#reportForm')
.bootstrapValidator({
excluded: ':disabled',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'The title is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'The abstract is required'
}
}
},
os: {
validators: {
notEmpty: {
message: 'The operating system is required'
}
}
},
'browser[]': {
validators: {
notEmpty: {
message: 'Choose at least one browser'
}
}
},
priority: {
validators: {
notEmpty: {
message: 'The priority is required'
}
}
}
}
})
.on('error.field.bv', function(e, data) {
// $(e.target) --> The field element
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
// Hide the messages
data.element
.data('bv.messages')
.find('.help-block[data-bv-for="' + data.field + '"]').hide();
});
});By default, all messages are shown at the same time. It's also possible if you want only one message to be shown each time by triggering the error.validator.bv event.
This event is triggered when the field doesn't pass a particular validator.
In the following registration form, the username field must pass three validators. But there is one message shown each time.
<form id="registrationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Username</label>
<div class="col-md-4">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>$(document).ready(function() {
$('#registrationForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
username: {
validators: {
notEmpty: {
message: 'The username is required and cannot 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 and digits'
}
}
}
}
})
.on('error.validator.bv', function(e, data) {
// $(e.target) --> The field element
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
// data.validator --> The current validator name
data.element
.data('bv.messages')
// Hide all the messages
.find('.help-block[data-bv-for="' + data.field + '"]').hide()
// Show only message associated with current validator
.filter('[data-bv-validator="' + data.validator + '"]').show();
});
});