Validating a form placed inside a Bootstrap modal
← Examples
It's possible to use the plugin with a form which is placed inside a Bootstrap Modal.
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 plugin might ignore the fields.
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').formValidation({
message: 'This value is not valid',
excluded: ':disabled',
...
});
});
<p class="text-center">
<button class="btn btn-default" data-toggle="modal" data-target="#loginModal">Login</button>
</p>
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h5 class="modal-title">Login</h5>
</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-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="username" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Login</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#loginForm').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
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>Resetting form when showing the modal
If you want to reset all the fields in form whenever the modal is shown, the resetForm() method will help you:
$('#loginModal').on('hidden.bs.modal', function() {
$('#loginForm').formValidation('resetForm', true);
});