Showing required icon for the mandatory fields
← Examples
If you want to reuse the behaviour in this example, take a look at the mandatoryIcon add-on.
As you know, the FormValidation provides three feedback icons which are shown based on the status of field:
$(document).ready(function() {
$(form).formValidation({
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
}
...
});
});| Setting | Description |
|---|---|
icon.valid | Shown when the field is valid |
icon.invalid | Shown when the field is invalid |
icon.validating | Shown when the field is being validated |
In this example, you will see how to show a required icons if the field is mandatory.
The setting will look like as following:
$(document).ready(function() {
// Use Glyphicons icons
$(form).formValidation({
icon: {
required: 'glyphicon glyphicon-asterisk',
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
}
...
});
// Use FontAwesome icons
$(form).formValidation({
icon: {
required: 'fa fa-asterisk',
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}
...
});
});The implementation uses:
- getOptions() method to get the required icon option
- Show the required icons by triggering the init.field.fv event which is called after the field is initialized by the plugin
- Hide the required icons by triggering the status.field.fv event which is called after the field changes its status
<form id="productForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Description</label>
<div class="col-xs-5">
<textarea class="form-control" name="description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Price</label>
<div class="col-xs-3">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="price" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Quantity</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="quantity" />
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Add product</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#productForm')
// IMPORTANT: You must declare .on('init.field.fv')
// before calling .formValidation(options)
.on('init.field.fv', function(e, data) {
// data.fv --> The FormValidation instance
// data.field --> The field name
// data.element --> The field element
var $icon = data.element.data('fv.icon'),
options = data.fv.getOptions(), // Entire options
validators = data.fv.getOptions(data.field).validators; // The field validators
if (validators.notEmpty && options.icon && options.icon.required) {
// The field uses notEmpty validator
// Add required icon
$icon.addClass(options.icon.required).show();
}
})
.formValidation({
framework: 'bootstrap',
icon: {
required: 'fa fa-asterisk',
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
description: {
validators: {
stringLength: {
max: 300,
message: 'The description must be less than 300 characters long'
}
}
},
price: {
validators: {
notEmpty: {
message: 'The price is required'
},
numeric: {
message: 'The price must be a number'
}
}
},
quantity: {
validators: {
notEmpty: {
message: 'The quantity is required'
},
integer: {
message: 'The quantity must be a number'
}
}
}
}
})
.on('status.field.fv', function(e, data) {
// Remove the required icon when the field updates its status
var $icon = data.element.data('fv.icon'),
options = data.fv.getOptions(), // Entire options
validators = data.fv.getOptions(data.field).validators; // The field validators
if (validators.notEmpty && options.icon && options.icon.required) {
$icon.removeClass(options.icon.required).addClass('fa');
}
});
});
</script> If the form uses different input types which might cause the required icon not shown properly, you can adjust its position.