It's possible to use the plugin with a form which is placed inside a Bootstrap Modal.
<button class="btn btn-default" 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-default">Login</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>$(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'
}
}
}
}
});
});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/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.
$(document).ready(function() {
$('#loginForm').bootstrapValidator({
message: 'This value is not valid',
excluded: [':disabled'],
...
});
});If you want to reset all the fields in form whenever the modal is shown, the resetForm() method will help you:
$('#loginModal').on('shown.bs.modal', function() {
$('#loginForm').bootstrapValidator('resetForm', true);
});