<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Include iCheck skin --> <link rel="stylesheet" href="http://cdn.jsdelivr.net/icheck/1.0.2/skins/square/red.min.css"> <!-- Include iCheck plugin --> <script src="http://cdn.jsdelivr.net/icheck/1.0.2/icheck.min.js"></script> <!-- Set the radio/checkbox position properly --> <style type="text/css"> #icheckForm .radio, #icheckForm .checkbox { padding-left: 0; } </style> <form id="icheckForm" method="post" class="form-horizontal"> <div class="form-group"> <label class="col-lg-3 control-label">Job position</label> <div class="col-lg-5"> <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-lg-3 control-label">Programming Languages</label> <div class="col-lg-5"> <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-lg-5 col-lg-offset-3"> <button type="submit" class="btn btn-default">Validate</button> </div> </div> </form>

$(document).ready(function() { $('#icheckForm') .bootstrapValidator({ feedbackIcons: { 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({ 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').bootstrapValidator('revalidateField', field); }); });