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

between validator

Check if the input value is between (strictly or not) two given numbers

← Validators

Options

* — Required option

Option HTML attribute Type Description
inclusive data-fv-between-inclusive Boolean Can be true or false. If true, the input value must be in the range strictly
max* data-fv-between-max or max Float The upper value in the range.
It's a dynamic option
message data-fv-between-message String The error message. The dynamic message is supported
min* data-fv-between-min or min Float The lower value in the range.
It's a dynamic option

If you use min and max attributes, please set type="range".

When setting options via HTML attributes, remember to enable the validator by setting data-fv-between="true".
You don't need to do that when using all of HTML 5 type="range", min="...", max="..." attributes.
The message and other options can be updated on the fly via the updateMessage() and updateOption() methods

If you want the value to support custom format, such as a comma for thousand separator, you should use the transformer option. The modifying the value before validating example is good starting point.

Example

Basic example

The following example validates latitude and longitude values.

A valid latitude must be between -90.0 and 90.0, and valid longitude may range from -180.0 to 180.0.

<form id="latlongForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Latitude</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="latitude" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Longitude</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="longitude" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#latlongForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            latitude: {
                validators: {
                    between: {
                        min: -90,
                        max: 90,
                        message: 'The latitude must be between -90.0 and 90.0'
                    }
                }
            },
            longitude: {
                validators: {
                    between: {
                        min: -180,
                        max: 180,
                        message: 'The longitude must be between -180.0 and 180.0'
                    }
                }
            }
        }
    });
});
</script>
<form id="latlongForm" 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-3 control-label">Latitude</label>
        <div class="col-xs-5">
            <input class="form-control" name="latitude"
                   type="text" min="-90" max="90"
                   data-fv-between-message="The latitude must be between -90.0 and 90.0" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Longitude</label>
        <div class="col-xs-5">
            <input class="form-control" name="longitude"
                   type="text" min="-180" max="180"
                   data-fv-between-message="The longitude must be between -180.0 and 180.0" />
        </div>
    </div>
</form>

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

Dynamic option example

The following form asks you to enter the number of floors of building and the your floor number. Your floor number must be between 1 and the number of floors.

<form id="dynamicOptionForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Number of floors</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="numFloors" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Your floor</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="floor" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#dynamicOptionForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                numFloors: {
                    validators: {
                        between: {
                            min: 2,
                            max: 100,
                            message: 'The number of floors must be between 2 and 100'
                        }
                    }
                },
                floor: {
                    validators: {
                        between: {
                            min: 1,
                            max: 'numFloors',
                            message: 'The number of floors must be between %s and %s'
                        }
                    }
                }
            }
        })
        // Revalidate the floor field when changing the number of floors
        .on('keyup', '[name="numFloors"]', function(e) {
            $('#dynamicOptionForm').formValidation('revalidateField', 'floor');
        });
});
</script>
Example

Related validators

The following validators might be useful to you:

← base64 validator bic validator →