Skip to content

Instantly share code, notes, and snippets.

@jasonhinkle
Created May 19, 2014 07:11
Show Gist options
  • Save jasonhinkle/069a770a3e9029cbfe24 to your computer and use it in GitHub Desktop.
Save jasonhinkle/069a770a3e9029cbfe24 to your computer and use it in GitHub Desktop.
bootstrapValidator form-level error container
<script>
$(document).ready(function(){
$('#myForm').bootstrapValidator({
container: '#form-errors',
fields: {
FieldOne: {
validators: {
notEmpty: { message: 'Please provide a value for Field One' }
}
},
FieldTwo: {
validators: {
notEmpty: { message: 'Please provide a value for Field Two' }
}
}
}
})
.on('error.form.bv', function(e) {
// if the form is submitted with errors, show the form-level error container
$('#form-errors-container').show('fast');
});
// once the user corrects form errors, hide the form-level error container
$('input').on('change',function(e) {
if ($('#form-errors-container').is(":visible"))
$('#form-errors:not(:has(:visible))').parent().hide('fast');
});
});
</script>
<form id="myForm" role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label" for="FieldOne">Field One</label>
<div class="col-sm-9">
<input type="text" id="FieldOne" name="FieldOne"class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="FieldTwo">Field Two</label>
<div class="col-sm-9">
<input type="text" id="FieldTwo" name="FieldTwo"class="form-control">
</div>
</div>
<div id="form-errors-container" class="alert alert-danger" style="display: none;">
<div id="form-errors"></div>
</div>
<button type="submit" class="btn btn-primary">Submit Form</button>
</form>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment