This site contains the document for old version. Please upgrade to the latest version v1.0.0

Playing with Awesome Bootstrap Checkbox

This example shows how to validate check boxes and radio buttons which are customized by the Awesome Bootstrap Checkbox library.

You should look at the basic principles when integrating FormValidation with other plugins

As described in the official usage, there are two important notices:

Each checkbox, radio button should have styled class in order to support Opera 12 and earlier versions
The for attribute of label element is the same as associated id attribute of checkbox or radio button. So clicking on the label will have the same effect as checking the button

We also need to override the styles for styled radio button to fix the issue where the Font Awesome check icon is shown inside the radio button:

/* Don't add a FontAwesome check icon to the radio */
input[type="radio"].styled:checked+label:after {
    font-family: 'FontAwesome';
    content: '';
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.5/awesome-bootstrap-checkbox.min.css" />

<style type="text/css">
/* Don't add a check icon to the radio */
input[type="radio"].styled:checked+label:after {
    font-family: 'FontAwesome';
    content: '';
}
</style>

<form id="checkboxForm" 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">
                <input type="radio" name="job" value="designer" id="designerRadio" class="styled" />
                <label for="designerRadio">Designer</label>
            </div>

            <div class="radio">
                <input type="radio" name="job" value="frontend" id="frontendRadio" class="styled" />
                <label for="frontendRadio">Front-end Developer</label>
            </div>

            <div class="radio">
                <input type="radio" name="job" value="backend" id="backendRadio" class="styled" />
                <label for="backendRadio">Back-end Developer</label>
            </div>

            <div class="radio">
                <input type="radio" name="job" value="dba" id="dbaRadio" class="styled" />
                <label for="dbaRadio">Database Administrator</label>
            </div>

            <div class="radio">
                <input type="radio" name="job" value="sys" id="sysRadio" class="styled" />
                <label for="sysRadio">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">
                <input type="checkbox" name="languages[]" value="net" id="netCheckbox" class="styled" />
                <label for="netCheckbox">.Net</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="languages[]" value="java" id="javaCheckbox" class="styled" />
                <label for="javaCheckbox">Java</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="languages[]" value="c" id="cCheckbox" class="styled" />
                <label for="cCheckbox">C/C++</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="languages[]" value="php" id="phpCheckbox" class="styled" />
                <label for="phpCheckbox">PHP</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="languages[]" value="perl" id="perlCheckbox" class="styled" />
                <label for="perlCheckbox">Perl</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="languages[]" value="ruby" id="rubyCheckbox" class="styled" />
                <label for="rubyCheckbox">Ruby</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="languages[]" value="python" id="pythonCheckbox" class="styled" />
                <label for="pythonCheckbox">Python</label>
            </div>

            <div class="checkbox">
                <input type="checkbox" name="languages[]" value="javascript" id="javascriptCheckbox" class="styled" />
                <label for="javascriptCheckbox">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() {
    $('#checkboxForm').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'
                    }
                }
            }
        }
    });
});
</script>

Related example

iCheck