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.

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='');">
Demo : HTML 5 code that MIGHT allow only numbers within a range in text field 1

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)));">
Demo : HTML 5 code that MIGHT allow only numbers within a range in text field 2

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.

Demo : Javascript to allow only numbers less than 10 in text field

https://shopinson.com/do-you-know/whats-openideo/

LEAVE A REPLY

Please enter your comment!
Please enter your name here