Hiding success class
← Examples
Hiding success class and tick icon
Based on the field status, the field and its container are marked as success or error element. For Bootstrap form, 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.fv event as below:
<form id="proposalForm" 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>
<script>
$(document).ready(function() {
$('#proposalForm')
.formValidation({
framework: 'bootstrap',
icon: {
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.fv', function(e, data) {
// $(e.target) --> The field element
// data.fv --> The FormValidation 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
data.element.data('fv.icon').hide();
});
});
</script>Hiding success class and tick icon when field is empty
Based on this approach, it's possible to hide success icon and remove the success CSS class from the container if the field is empty. You just simply change the success.field.fv event handler a little bit:
$(document).ready(function() {
$('#proposalForm')
.formValidation({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
...
}
})
.on('success.field.fv', function(e, data) {
// If the field is empty
if (data.element.val() === '') {
var $parent = data.element.parents('.form-group');
// Remove the has-success class
$parent.removeClass('has-success');
// Hide the success icon
data.element.data('fv.icon').hide();
}
});
});