Hiding messages
← Examples
In order to archive this, there are two things you need to know:
- The err.field.fv event is triggered when the field is invalid
- The element containing field messages can be retrieved via
$field.data('fv.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-xs-3 control-label">Bug title</label>
<div class="col-xs-6">
<input type="text" class="form-control" name="title" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-6">
<textarea class="form-control" name="description" rows="8"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Operating system</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="os" value="window" /> Window
</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>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Browser(s)</label>
<div class="col-xs-9">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default">
<input type="checkbox" name="browser[]" value="ie" /> IE
</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-xs-3 control-label">Priority</label>
<div class="col-xs-4">
<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-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Report issue</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#reportForm')
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
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('err.field.fv', function(e, data) {
// $(e.target) --> The field element
// data.fv --> The FormValidation instance
// data.field --> The field name
// data.element --> The field element
// Hide the messages
data.element
.data('fv.messages')
.find('.help-block[data-fv-for="' + data.field + '"]').hide();
});
});
</script>