programer.tips, another cool thing from @nghuuphuoc!

between validator

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

Validators

Improve it on Github

Options

Option HTML attribute Type Description
inclusive data-bv-between-inclusive Boolean Can be true or false. If true, the input value must be in the range strictly
max* data-bv-between-max or max Float The upper value in the range.
It's a dynamic option
message data-bv-between-message String The error message
min* data-bv-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-bv-between="true".
You don't need to do that when using all of HTML 5 type="range", min="...", max="..." attributes.

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-sm-3 control-label">Latitude</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="latitude" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Longitude</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="longitude" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#latlongForm').bootstrapValidator({
        feedbackIcons: {
            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'
                    }
                }
            }
        }
    });
});
<form id="latlongForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-lg-3 control-label">Latitude</label>
        <div class="col-lg-5">
            <input class="form-control" name="latitude"
                type="range" min="-90" max="90"
                data-bv-between-message="The latitude must be between -90.0 and 90.0" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-lg-3 control-label">Longitude</label>
        <div class="col-lg-5">
            <input class="form-control" name="longitude"
                type="range" min="-180" max="180"
                data-bv-between-message="The longitude must be between -180.0 and 180.0" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#latlongForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        }
    });
});

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-sm-3 control-label">Number of floors</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="numFloors" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-3 control-label">Your floor</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="floor" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#dynamicOptionForm').bootstrapValidator({
        feedbackIcons: {
            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'
                    }
                }
            }
        }
    });
});

Related validators

The following validators might be useful to you: