I have a text field which should allow the user to enter numbers,the maximum length should be 2 and the maximum value should be 31 and minimum value should 1 I am able to first 2 conditions but dont know the last 2 conditions

Can anybody help me please?

<input type="text"  name = "ccdate" class="form-control" maxlength="2" onkeypress="return isNumber(event)" >


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;
}

NOte I dont want to use HTML5 input type="number"

I have a text field which should allow the user to enter numbers,the maximum length should be 2 and the maximum value should be 31 and minimum value should 1 I am able to first 2 conditions but dont know the last 2 conditions

Can anybody help me please?

<input type="text"  name = "ccdate" class="form-control" maxlength="2" onkeypress="return isNumber(event)" >


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;
}

NOte I dont want to use HTML5 input type="number"

• javascript
• jquery

Share Improve this question Follow asked Sep 13, 2014 at 6:16 SpringLearnerSpringLearner 13.9k2020 gold badges8181 silver badges117117 bronze badges 1

• guys the fiddle is not working for some reason so I have not posted in question jsfiddle/rnr45dfz – SpringLearner Commented Sep 13, 2014 at 6:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Try this(Purely Jquery approach):

HTML :

<input type="text"  name = "ccdate" class="form-control" maxlength="2">
<div id="div1"></div>

JQUERY :

$('[name="ccdate"]').keyup(function(){
  if(parseInt($(this).val()) > 31){
    $('#div1').html('value cannot be greater then 31');
    $(this).val('');
  }
  else if(parseInt($(this).val()) < 1)
  {
    $('#div1').html('value cannot be lower then 1');
    $(this).val('');
  }
  else
  { $('#div1').html(''); }
});

Working Demo

---

EDIT :-(as per questioner ment to check user entered string or number):

$('[name="ccdate"]').keyup(function(){
  if(isNaN($(this).val()))
   {
    $('#div1').html('entered string');
    $(this).val('');
   }
  else if(parseInt($(this).val()) > 31){
    $('#div1').html('value cannot be greater then 31');
    $(this).val('');
  }
  else if(parseInt($(this).val()) < 1)
  {
    $('#div1').html('value cannot be lower then 0');
    $(this).val('');
  }
  else
  { $('#div1').html(''); }
});

Working Demo

---

EDIT :- (Pure Javascript approach)(Just provide a unique id to your textbox say 't1')

document.getElementById('t1').addEventListener('keyup', function(){
this.value = (parseInt(this.value) < 1 || parseInt(this.value) > 31 || isNaN(this.value)) ? "" : (this.value)
});

Working Demo

document.querySelector("*[name=ccdate]").addEventListener("input", function () {
    var num = +this.value, max = 31, min = 1;          //converts value to a Number
    if(!this.value.length) return false;               //allows empty field
    this.value = isNaN(num) ? min : num > max ? max : num < min  ? min : num;
});

http://jsfiddle/cha9t3g5/2

Use min and max attributes and if you want user to enter numbers then give input type as number instead of giving it as text...

<input type="number" name ="name_u_want_to_give" min="1" max="31" maxlength="2" />

Please correct the following code as per your requirements.

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