CODEWITHSUNDEEP
javascriptjquery
Shabarinath Volam
Shabarinath Volam

Reputation: 747

Javascript or jQuery to accept numbers less than 100 for text field

In my project I have a text field where I need to accept values less than or equal to 100. In that text field how can I achieve this through javascript or jquery. Somehow I have managed to accept only numbers in text box but how can i restrict it not accept numbers greater than 100.

Here is the code which I have tried to accept only numbers

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

Upvotes: 6

Views: 74904

Answers (8)

Albzi
Albzi

Reputation: 15609

First off, you can use number type in HTML5 with the max attribute set to 100.

<input id="numberbox" type='number' max='100'>

This will allow your browser to detect when it's over 100 when submitted. However, it won't work on older browsers and some smartphones.

Alternatively, you could do this:

<input type='text' maxlength='2' pattern='^[0-9]$'>

But I feel this option is overkill. But if you want to do it that way, that's up to you.

In jQuery, you can do this:

$('#numberbox').keyup(function(){
  if ($(this).val() > 100){
    alert("No numbers above 100");
    $(this).val('100');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='text' id='numberbox'>

Please also validate back-end, someone with only just enough knowledge could easily bypass this.

Upvotes: 9

Blu
Blu

Reputation: 4056

Check this demo

Also you have to restrict the length of text field

Something like this

var fieldVal = document.getElementById('txtF').value;
//Suppose u want  number that is less than 100
if(fieldVal < 100){
    return true;
}
else
{
  //
}

Upvotes: 3

Jai
Jai

Reputation: 74738

You can do this:

$('yourElem').on('keydown', function(e){
    if(this.value > 100){
       alert('You have entered more than 100 as input');
       return false;
    }
});

maxlength attribute can restrict the numbers more than 3 digits, so you can use this to restrict:

maxlength="3"

yet you need to do js validation as suggested above because user with maxlength still can enter more than 100 as asked.

Upvotes: 2

vinayak hegde
vinayak hegde

Reputation: 2222

along with your code you can add one more line to restrict text-field to accept less than 2 char....

    if (charCode.length > 2) {
    return false;
    }

Upvotes: 2

Rahul Tripathi
Rahul Tripathi

Reputation: 172448

Try this:

<script type="text/javascript">
function fnc(value, min, max) 
{
    if(parseInt(value) < 0 || isNaN(value)) 
        return 0; 
    else if(parseInt(value) > 100) 
        return "Number is greater than 100"; 
    else return value;
}
</script>
<input type="text" name="textWeight" id="txtWeight" maxlength="5" onkeyup="this.value = fnc(this.value, 0, 100)"/>

Upvotes: 1

user2075328
user2075328

Reputation: 431

please use max length

maxlength="2"

EX.

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp">
  PIN: <input type="text" name="pin" maxlength="2" size="30"><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Upvotes: 1

Man Programmer
Man Programmer

Reputation: 5356

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    var str = String.fromCharCode(charCode);
    if (str>100)) {
        return false;
    }
    return true;
}

you can use fromCharCode it can return character

Upvotes: 1

Thomas
Thomas

Reputation: 1420

With jquery you can to something like this :

$('#my-field').blur(function() {
   if(parseInt($(this).val()) < 100) {
       $(this).val('');
   }
});

The blur event is thrown when user leave the field (field loose the focus). Then it chekcks if the value is less than 100 and empty it if necessary.

Upvotes: 2

Related Questions