jQuery and javascript to ALLOW range of number ONLY in a text field

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:

• • PYTHON listing files contained in a directory
  • running metasploit framework on WINDOWS OS
  • PHP BIN2HEX

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:

• • A seven-year-old child learns the word “fuck”.
  • The well known EIGHT 8 hacking tactics

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

• What is open IDEO ?