Examples / Compatibility

<!-- Include iCheck skin -->
<link rel="stylesheet" href="/vendor/icheck/skins/square/red.css" />
<!-- Set the radio/checkbox positon 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-primary">Validate</button>
        </div>
    </div>
</form>

<!-- Include iCheck plugin -->
<script src="/vendor/icheck/icheck.min.js"></script>
<script>
$(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')
                    // Mark the field as not validated
                    .bootstrapValidator('updateStatus', field, 'NOT_VALIDATED')
                    // Validate field
                    .bootstrapValidator('validateField', field);
            });
});
</script>