v0.5.3 is released on 2014.11.05!
The following example shows how to clear the field when clicking the feedback icon.
In order to archive this, there are some useful things for us:
- Trigger the init.field.bv event which is called after the plugin initializes the fields, such as prepare the feedback icon and message elements
- Handle the feedback icon's
clickevent - Using the resetField() method to clear the field
<form id="clearingForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Description</label>
<div class="col-sm-5">
<textarea class="form-control" name="description" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Price</label>
<div class="col-sm-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-sm-3 control-label">Quantity</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="quantity" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">Add product</button>
</div>
</div>
</form>$(document).ready(function() {
$('#clearingForm')
// IMPORTANT: You must declare .on('init.field.bv')
// before calling .bootstrapValidator(options)
.on('init.field.bv', function(e, data) {
// data.bv --> The BootstrapValidator instance
// data.field --> The field name
// data.element --> The field element
var $parent = data.element.parents('.form-group'),
$icon = $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]');
// From v0.5.3, you can retrieve the icon element by
// $icon = data.element.data('bv.icon');
$icon.on('click.clearing', function() {
// Check if the field is valid or not via the icon class
if ($icon.hasClass('glyphicon-remove')) {
// Clear the field
data.bv.resetField(data.element);
}
});
})
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
description: {
validators: {
notEmpty: {
message: 'The description is required'
},
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'
}
}
}
}
});
});