FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

integer validator

Validate an integer number. Accept both positive and negative number

← Validators

Options

Option HTML attribute Type Description
message data-fv-integer-message String The error message
thousandsSeparator v0.7.0+ data-fv-integer-thousandsseparator String The thousands separator. The popular values are
  • An empty string default
  • A bank space
  • A comma (,)
  • A dot (.)
decimalSeparator v0.7.0+ data-fv-integer-decimalseparator String The decimal separator. The popular values are
  • A dot (.) default
  • A comma (,)
When setting options via HTML attributes, remember to enable the validator by setting data-fv-integer="true".
You don't need to do that when
i) using HTML 5 type="number" attribute,
ii) and the step attribute is not specified, or its value is an integer
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods

The thousandsSeparator and decimalSeparator options are useful if your country use particular separators for thousands and decimal parts. See the next supporting locales section for more details.

Supporting locales

The thousands and decimal separators might take different value in certain countries. The following table introduces some popular values that are defined by various countries.

You can click the sample number to test:

Country Thousands separator Decimal separator Valid ejemplos Invalid ejemplos
An empty string A dot (.)
United States A comma (,) A dot (.)
France A blank space A comma (,)
Italy A dot (.) A comma (,)

The example also uses the updateOption() method to set values for thousandsSeparator and decimalSeparator options. 

$('#integerForm')
    // Update the options
    .formValidation('updateOption', 'number', 'integer', 'thousandsSeparator', thousandsSeparator)
    .formValidation('updateOption', 'number', 'integer', 'decimalSeparator', decimalSeparator);
Since the thousands and decimal separators are various, the field should use type="text" attribute. Using type="number" for field will restrict the input to use default separators for an integer number (an empty string for thousands, and a dot for decimal parts) 
<form id="integerForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-4 control-label">Country</label>
        <div class="col-xs-3">
            <select class="form-control" name="country">
                <option value="">Choose a country</option>
                <option value="en_US">United States</option>
                <option value="fr_FR">France</option>
                <option value="it_IT">Italy</option>
            </select>
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-4 control-label">Type an integer number</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="number" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#integerForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                number: {
                    validators: {
                        integer: {
                            message: 'The value is not an integer',
                            // The default separators
                            thousandsSeparator: '',
                            decimalSeparator: '.'
                        }
                    }
                }
            }
        })
        .on('change', '[name="country"]', function() {
            var thousandsSeparator = '',
                decimalSeparator   = '.';
            switch ($(this).val()) {
                case 'en_US':
                    thousandsSeparator = ',';
                    decimalSeparator   = '.';
                    break;

                case 'fr_FR':
                    thousandsSeparator = ' ';
                    decimalSeparator   = ',';
                    break;

                case 'it_IT':
                    thousandsSeparator = '.';
                    decimalSeparator   = ',';
                    break;

                case '':
                default:
                    thousandsSeparator = '';
                    decimalSeparator   = '.';
                    break;
            }

            $('#integerForm')
                // Update the options
                .formValidation('updateOption', 'number', 'integer', 'thousandsSeparator', thousandsSeparator)
                .formValidation('updateOption', 'number', 'integer', 'decimalSeparator', decimalSeparator)
                // and revalidate the number
                .formValidation('revalidateField', 'number');
        })
});
</script>

ejemplos

Basic example

<form id="integerForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-4 control-label">Type an integer number</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="number" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#integerForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            number: {
                validators: {
                    integer: {
                        message: 'The value is not an integer'
                    }
                }
            }
        }
    });
});
</script>
<form id="integerForm" class="form-horizontal"
    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-4 control-label">Type an integer number</label>
        <div class="col-xs-3">
            <input type="text" class="form-control" name="number"
                data-fv-integer="true"
                data-fv-integer-message="The value is not an integer" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#integerForm').formValidation();
});
</script>

HTML 5 example

You can use HTML 5 type="number" attribute to enable the integer validator. 

<style type="text/css">
/* Place the HTML 5 spinner at the default position */
#html5Form .inputContainer .form-control {
    padding-right: 10px;
}
/* Adjust feedback icon position */
#html5Form .inputContainer .form-control-feedback {
    right: -15px;
}
</style>

<form id="html5Form" class="form-horizontal"
    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-4 control-label">Type an integer number</label>
        <div class="col-xs-3 inputContainer">
            <input class="form-control" name="number"
                type="number"
                data-fv-integer-message="The value is not an integer" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#html5Form').formValidation();
});
</script>

Related validators

The following validators might be useful to you:

← imo validator ip validator →