Today’s shopinson codes is on using jQuery and javascript to ALLOW range of numbers ONLY in a text field.
Mr. Shopinson was thinking of developing a web application but needs to add some kind of validation where the user can only be able to type in Number only input box with range restriction.
see also:
Actually this and others alike validation have been the order of the day on search by other web developer as I am.

WHAT i did.
I tried to solve this problem using html 5 but up to no avail. you may also like to read about php ALLOW only a range of numbers from a FORM field
HTML 5 code that MIGHT allow only numbers within a range in text field
Definitely I tried HTML5 constraint validation API but it was supported mainly by some web browsers.
<input type="number" min="2" max="7" step="1" id="n" oninput="(validity.valid)||(value='');">
Then I used the snippet of basic code below either To validate and auto-correct the input depending on validity states rangeOverflow
, rangeUnderflow
, stepMismatch
<input type="number" min="1" max="10" id="numberSize" oninput="(!validity.rangeOverflow||(value=10)) && (!validity.rangeUnderflow||(value=1)) &&(!validity.stepMismatch||(value=parseInt(this.value)));">
This code above will send
- all inputs >max to max
- inputs < min to min
and truncate decimal values.
jQuery plugin to allow only numbers in certain range in a text field?
Plugins/Validation/Methods/range should get you started with making sure only a number in a certain range is entered.
see also:
Javascript to allow only numbers less than 10 in text field
in this code below i have two javascript code the (1st) first part makes sure that only numbers are typed in the text field while the (2nd) second part javascript code makes sure that the numbers typed is within the range of 0 to 10
<script type="text/javascript"> //1st part- making sure only numbers are typed function isNumberKey(evt){ var charCode = (evt.which) ? evt.which : event.keyCode if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; return true; } //*ends - allowing only numbers //2nd part - validates only numbers with in the range 0 to 10 is typed in function fnc(value, min, max) { if(parseInt(value) < 0 || isNaN(value)) return 0; else if(parseInt(value) > 10) return "10"; else return value; } //*ends - number range validation </script>
Then i called the functions in the javascript codes above at onkeypress="return isNumberKey(event)" onkeyup="this.value = fnc(this.value, 0, 10)"
into my basic html codes as shown below
<input type="text" name="textWeight" id="txtWeight" maxlength="2" onkeypress="return isNumberKey(event)" onkeyup="this.value = fnc(this.value, 0, 10)"/>
Maxlength="2"
is a html validation method that makes sure that only two character of number or text is the text field.
see also
[…] we have discussed this earlier in our previous post of validating a text to ALLOW a range of number using javascript and jquery validating only in such manner is not globally accepted because someone may bypass the javascript / jquery […]