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

between validator

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

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

Validating percentage values

Related validators

The following validators might be useful to you:

← base64 validator bic validator →