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

numeric validator

Check if the value is a number

← Validators

Options

Option HTML attribute Type Description
message data-fv-numeric-message String The error message
thousandsSeparator v0.7.0+ data-fv-numeric-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-numeric-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-numeric="true".
You don't need to do that when
i) using HTML 5 type="number" attribute,
ii) and the step attribute must be specified which its value is not 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.

If you want the value to support more special formats, you should use the transformer option. The modifying the value before validating example is good starting point.

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. 

$('#numericForm')
    // Update the options
    .formValidation('updateOption', 'number', 'numeric', 'thousandsSeparator', thousandsSeparator)
    .formValidation('updateOption', 'number', 'numeric', '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 a number (an empty string for thousands, and a dot for decimal parts) 
<form id="numericForm" 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 a number</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="number" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#numericForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                number: {
                    validators: {
                        numeric: {
                            message: 'The value is not a number',
                            // 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;
            }

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

Related validators

The following validators might be useful to you:

← notEmpty validator phone validator →