Playing with iCheck
← Examples
This example shows how to validate check boxes and radio buttons which are rendered by the iCheck plugin.
You should look at the basic principles when integrating FormValidation with other plugins
<!-- Include iCheck skin -->
<link rel="stylesheet" href="/vendor/icheck/skins/square/red.css" />
<!-- Include iCheck plugin -->
<script src="/vendor/icheck/icheck.min.js"></script>
<!-- Set the radio/checkbox position properly -->
<style type="text/css">
#icheckForm .radio label, #icheckForm .checkbox label {
padding-left: 0;
}
</style>
<form id="icheckForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Job position</label>
<div class="col-xs-6">
<div class="radio">
<label>
<input type="radio" name="job" value="designer" /> Designer
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="frontend" /> Front-end Developer
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="backend" /> Back-end Developer
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="dba" /> Database Administrator
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="job" value="sys" /> System Engineer
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Programming Languages</label>
<div class="col-xs-6">
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="net" /> .Net
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="java" /> Java
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="c" /> C/C++
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="php" /> PHP
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="perl" /> Perl
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="ruby" /> Ruby
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="python" /> Python
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="languages[]" value="javascript" /> Javascript
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-xs-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#icheckForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
job: {
validators: {
notEmpty: {
message: 'The job position is required'
}
}
},
'languages[]': {
validators: {
choice: {
min: 2,
max: 4,
message: 'Please choose 2 - 4 programming languages you are good at'
}
}
}
}
})
.find('input[name="job"], input[name="languages[]"]')
// Init icheck elements
.icheck({
// The tap option is only available in v2.0
tap: true,
checkboxClass: 'icheckbox_square-red',
radioClass: 'iradio_square-red'
})
// Called when the radios/checkboxes are changed
.on('ifChanged', function(e) {
// Get the field name
var field = $(this).attr('name');
$('#icheckForm').formValidation('revalidateField', field);
})
.end();
});
</script>Supporting mobile browsers
In iCheck v1.0.x, the input state is changed after 300ms delay on mobile browsers. Therefore, the field isn't revalidated right after clicking on it.
iCheck v2.0 provides an option named tap to solve this issue. Setting it to true will fire the ifChanged event after touchend, pointerup events.
For more information on this, see the iCheck's issue #95.
$('#icheckForm')
.formValidation({
...
})
.find('input[name="job"], input[name="languages[]"]')
.icheck({
// The tap option is only available in v2.0
tap: true,
...
})
.on('ifChanged', function(e) {
...
})
.end(); As of writing this, the iCheck v2.0 isn't released and not available on its official website. You must download from its Github page.