How to limit the max and min value of number in html text field

Question

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"

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

Kartikeya Khosla · Accepted Answer · 2014-09-13 07:35:05Z

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 comment 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

edited Sep 13, 2014 at 7:35

answered Sep 13, 2014 at 6:27

Kartikeya Khosla

18.9k8 gold badges46 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SpringLearner Over a year ago

Thanks for the answer,As you can see I am using pure js to check if user is enering number or string.Your code is totally jquery.So is it ok to mix js with jquery?Can you also provide jquery to check if the user is entering string or number

SpringLearner Over a year ago

Thanks for the answer,+1.If possible please provide pure js answer

Kartikeya Khosla Over a year ago

@SpringLearner..i will definitely try to provide pure js code today i have very bad internet connection i have to test code for pure js answer .. i will try thanks...happy to help you...

Derek 朕會功夫 Over a year ago

@SpringLearner - Take a look at my answer if you prefer a shorter vanilla JS.

Derek 朕會功夫 · Accepted Answer · 2014-09-13 06:50:49Z

2

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.net/cha9t3g5/2

answered Sep 13, 2014 at 6:50

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Comments

Manmohan Jangid · Accepted Answer · 2014-09-13 06:21:29Z

1

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" />

answered Sep 13, 2014 at 6:21

Manmohan Jangid

515 bronze badges

2 Comments

SpringLearner Over a year ago

sorry I dont want use input type="number"

Manmohan Jangid Over a year ago

Then you have to use javascript to restrict user to enter non-allowed values..call a function from input element to check the conditions in javascript and return false if conditions fail

CrazyProgrammer · Accepted Answer · 2014-09-13 06:25:04Z

0

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)"/>`

answered Sep 13, 2014 at 6:25

CrazyProgrammer

491 gold badge3 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to limit the max and min value of number in html text field

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related