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

mandatoryIcon add-on

Show required icons for mandatory fields

← Add-ons

Follow these steps to use this add-on:

Including the add-on

  • Download mandatoryIcon add-on
  • Include mandatoryIcon.min.js (located in the dist directory) to your page. Ensure that it's placed after formValidation(.min).js
<!-- FormValidation plugin -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>

<!-- Add-ons. You should place it inside /vendor/formvalidation/dist/js/addons directory -->
<script src="/vendor/formvalidation/dist/js/addons/mandatoryIcon.js"></script>

Calling the add-on

It's possible to call the add-on in both programmatic and declarative ways:

$('#productForm').formValidation({
    framework: '...',
    icon: {
        ...
    },
    addOns: {
        mandatoryIcon: {
            icon: 'glyphicon glyphicon-asterisk'
        }
    },
    fields: {
        ...
    }
});

If you want to use multiple add-ons, just simply separate them by a comma in data-fv-addons attribute:

data-fv-addons="i18n, mandatoryIcon, recaptcha2"

<form id="signUpForm" method="post" class="form-horizontal"
    data-fv-addons="mandatoryIcon"
    data-fv-addons-mandatoryicon-icon="glyphicon glyphicon-asterisk">
    ...
</form>

The mandatoryIcon add-on provides the following options:

* — Required option

Option HTML attribute Type Description
icon* data-fv-addons-mandatoryicon-icon String The list of icon classes which are added to the feedback icon if the field is required

The mandatory and feedback icons are usually in the same icon sets:

Icon sets Example
Glyphicons 
icon: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
},
addOns: {
    mandatoryIcon: {
        icon: 'glyphicon glyphicon-asterisk'
    }
}
FontAwesome 
icon: {
    valid: 'fa fa-check',
    invalid: 'fa fa-times',
    validating: 'fa fa-refresh'
},
addOns: {
    mandatoryIcon: {
        icon: 'fa fa-asterisk'
    }
}
Semantic icons 
icon: {
    valid: 'checkmark icon',
    invalid: 'remove icon',
    validating: 'refresh icon'
},
addOns: {
    mandatoryIcon: {
        icon: 'asterisk icon'
    }
}
UIKit 
icon: {
    valid: 'uk-icon-check',
    invalid: 'uk-icon-times',
    validating: 'uk-icon-refresh'
},
addOns: {
    mandatoryIcon: {
        icon: 'uk-icon-asterisk'
    }
}

The mandatory icon is also shown when calling the resetForm() or resetField() methods. You can see it in action by clicking the Add product and then Reset form buttons.

Example

Below is the piece of code showing programmatic and declarative usages:

<!-- Include FormValidation files first -->

<!-- Then include mandatoryIcon add-on -->
<script src="/vendor/formvalidation/js/addons/mandatoryIcon.min.js"></script>

<form id="productForm" method="post" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Name</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="name" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-5">
            <textarea class="form-control" name="description" rows="5"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Price</label>
        <div class="col-xs-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-xs-3 control-label">Quantity</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="quantity" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Add product</button>
            <button type="button" class="btn btn-info" id="resetButton">Reset form</button>
        </div>
    </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#productForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        addOns: {
            mandatoryIcon: {
                icon: 'glyphicon glyphicon-asterisk'
            }
        },
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: 'The name is required'
                    }
                }
            },
            description: {
                validators: {
                    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'
                    }
                }
            }
        }
    });

    // Reset the form
    $('#resetButton').on('click', function() {
        $('#productForm').formValidation('resetForm');
    });
});
</script>
<!-- FormValidation plugin and the class supports validating Bootstrap form -->
<script src="/vendor/formvalidation/dist/js/formValidation.min.js"></script>
<script src="/vendor/formvalidation/dist/js/framework/bootstrap.min.js"></script>

<!-- mandatoryIcon add-on -->
<script src="/vendor/formvalidation/dist/js/addons/mandatoryIcon.min.js"></script>

<form id="productForm" method="post" class="form-horizontal"
    data-fv-addons="mandatoryIcon"
    data-fv-addons-mandatoryicon-icon="glyphicon glyphicon-asterisk"

    data-fv-framework="bootstrap"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Name</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="name"
                data-fv-notempty="true"
                data-fv-notempty-message="The name is required" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Description</label>
        <div class="col-xs-5">
            <textarea class="form-control" name="description" rows="5"
                data-fv-stringlength="true"
                data-fv-stringlength-max="300"
                data-fv-stringlength-message="The description must be less than 300 characters long"></textarea>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Price</label>
        <div class="col-xs-3">
            <div class="input-group">
                <span class="input-group-addon">$</span>
                <input type="text" class="form-control" name="price"
                        data-fv-notempty="true"
                        data-fv-notempty-message="The price is required"

                        data-fv-numeric="true"
                        data-fv-numeric-message="The price must be a number" />
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Quantity</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="quantity"
                    data-fv-notempty="true"
                    data-fv-notempty-message="The quantity is required"

                    data-fv-integer="true"
                    data-fv-integer-message="The quantity must be a number" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-5 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Add product</button>
        </div>
    </div>
</form>

<script type="text/javascript">
$(document).ready(function() {
    $('#productForm').formValidation();
});
</script>

Change log

  • v0.1.1:

    • Don't add the mandatory icon to the field that the notEmpty or validators aren't enabled
    • Add Grunt build and minified files
  • v0.1.0: First release