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

input type=number'' min max validation
input type=number'' min max not working
input type=number'' max value
html <input type=number'' min max
input type=number'' maxlength
how to set max value in textbox using jquery
how to set minimum length for a textbox in html
jquery numeric textbox with min and max ranges

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"

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

How to limit the max and min value of number in html text field , The max attribute specifies the maximum value for an <input> element. Note: The max and min attributes works with the following input types: number, range,� 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" />

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

HTML input max Attribute, <style> <sub> <summary> <sup> <svg> <table> <tbody> <td> <template> < textarea> <tfoot> Define a field for entering a number (You can also set restrictions on what <input type="number" id="quantity" name="quantity" min=" 1" max="5"> min - specifies the minimum value allowed; step - specifies the legal number� To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. To limit the number of characters, use the maxlength attribute. The max and min attributes are used with number, range, date, datetime, datetime-local, month, time and week input types.

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

HTML input type="number", The max attribute specifies the maximum value for a number field. Tip: Use the max attribute together with the min attribute to create a range of legal values. As with type="number", you specify a max instead of maxlength property, which is the maximum possible number possible. So with 4 digits, max should be 9999, 5 digits 99999 and so on. Also if you want to make sure it is a positive number, you could set min="0", ensuring positive numbers. share.

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

HTML DOM Input Number max Property, Take the input from the input element and convert it to number using Number() method. Use IF-ELSE If the number is less than the minimum value then give it the minimum value else if. html >. < head >. < title >. Limit a number between a min/max value. </ title > body style = "text-align:center;" >. The HTML <input> tag is used to get user input in HTML. To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. The max and min attributes are used with number, range, date, datetime, datetime-local, month, time and week input types.

How to limit a number between a min/max value in JavaScript , If the value of the max attribute isn't a number, then the element has no If a value is specified for min that isn't a valid number, the input has no type value, number , you get automatic validation that the entered text is a� The maxlength attribute specifies the maximum number of characters allowed in the <input> element. Browser Support The numbers in the table specify the first browser version that fully supports the attribute.

<input type="number">, input elements of type range let the user specify a numeric value This is typically represented using a slider or dial control rather than a text entry box like the number input type. min="0" max="100" value="90" step="10">. I had the same issue. trying to limit the values for seconds to maximum 59. I did this: In Onchange -> If(CompleteMin/1>59, Reset(CompleteMin), false) All values below 60 stays in the field but when I try higher the field resets. Had to divide the "CompleteMin" field with 1 to convert it from control to value. With best regards. Hafsteinn

<input type="range">, min and max imply validation of that value. When max and step are set, Chrome may display a narrower input box for number input type, as the length of the� The max attribute and data validation. Specifying a max attribute on an <input> element allows you to put an upper limit on certain types of inputs ‘number’ and ‘date’. The form will not accept any inputs higher than the max value. However, that does not absolve you (the developer) of proper form validation.

Comments
  • guys the fiddle is not working for some reason so I have not posted in question jsfiddle.net/rnr45dfz
  • 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
  • Thanks for the answer,+1.If possible please provide pure js answer
  • @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...
  • @SpringLearner - Take a look at my answer if you prefer a shorter vanilla JS.
  • sorry I dont want use input type="number"
  • 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