range, numbers, text field, javascript, allow, Jquery, Web application, shopinson, codes, jQuery and javascript to ALLOW range of numbers ONLY in a text field, Shopinson, Shopinson

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.

range, numbers, text field, javascript, allow, Jquery, Web application, shopinson, codes, jQuery and javascript to ALLOW range of numbers ONLY in a text field, Shopinson, Shopinson

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

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='');">
Demo : HTML 5 code that MIGHT allow only numbers within a range in text field 1
[sc name=”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
[sc name=”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
[sc name=”Javascript to allow only numbers less than 10 in text field”]

see also

1 Comment
  1. […] 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 […]

Leave a reply

Your email address will not be published. Required fields are marked *

*

shopinson-logo-32

©2020 Shopinson: complete guide to programming language

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account