Check if the input value is between (strictly or not) two given numbers.
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"
.
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-lg-3 control-label">Latitude</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="latitude" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Longitude</label>
<div class="col-lg-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'
}
});
});
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-lg-3 control-label">Number of floors</label>
<div class="col-lg-5">
<input type="text" class="form-control" name="numFloors" />
</div>
</div>
<div class="form-group">
<label class="col-lg-3 control-label">Your floor</label>
<div class="col-lg-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'
}
}
}
}
});
});
The following validators might be useful to you: