HTML5 Input Number Min Max Not Working with Required

HTML number input min and max not working properly

With HTML5 max and min, you can only restrict the values to enter numerals. But you need to use JavaScript or jQuery to do this kind of change. One idea I have is using data- attributes and save the old value:

$(function () {  $("input").keydown(function () {    // Save old value.    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))    $(this).data("old", $(this).val());  });  $("input").keyup(function () {    // Check correct, else revert back to old value.    if (!$(this).val() || (parseInt($(this).val()) <= 11 && parseInt($(this).val()) >= 0))      ;    else      $(this).val($(this).data("old"));  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><input type="number" min="0" max="23" value="14" />

HTML5 input number min max not working with required

This is the expected behaviour because FF21 doesnt supports min,max attribute...

you can check it in http://html5test.com/

Check the screenshot
Sample Image

Firefox: input field number min max not working

Firefox (unlike Chrome) seems to follow the HTML5 definition for stepping up the value of an input type=number element. When the value is not set, as it here isn’t initially, it is interpreted as 0, so the result of incrementing is 1. Since it is outside the range, it is an invalid value, and further stepping is not possible.

This means that input type=number is intended for use with quantities for which an initial value can be set (or the default initial value of 0 can be accepted). After all, stepping up and down is really the reason for using this element type, and it needs to start somewhere.

Consequently, there is not much point in using required for such an element, unless the implicit default of 0 is acceptable and within the bounds set.

If you still want to use input type=number, you need to set some initial value with the value attribute that is within the bounds. Technically, this means that the pattern attribute has no effect.

To read a required 4-digit number when no default value is set, optionally with a placeholder, you can use a text input field with suitable attributes (but you cannot express a range requirement in HTML, in any reasonable way, in this approach):

<input name="year" type="text" placeholder="YYYY"  size="4" maxlength="4" pattern="\d[4}" required  style="font-family: Consolas, monospace">

How can I set max-length in an HTML5 input type=number element?

And you can add a max attribute that will specify the highest possible number that you may insert

<input type="number" max="999" />

if you add both a max and a min value you can specify the range of allowed values:

<input type="number" min="1" max="999" />

The above will still not stop a user from manually entering a value outside of the specified range. Instead he will be displayed a popup telling him to enter a value within this range upon submitting the form as shown in this screenshot:

Sample Image

HTML min and max not working for number attribute

assuming the form name is form this is a barebone script. you should consider changing the input type to text so you won't have to worry about cross browser compatibility

<form id="form">
 <input type="text" id="AutoApprovalDelayInSeconds" step="1" placeholder="Range: 0 to 2592000">
 <input type="text" id="AssignmentDurationInSeconds" step="1" placeholder="Range: 30 to 31536000" required>
</form>

 var delay, duration, form;
     delay = document.getElementById('AutoApprovalDelayInSeconds');
     duration = document.getElementById('AssignmentDurationInSeconds');
     form = document.getElementById('form');

 form.onsubmit = function (e) {
   e.preventDefault();
   delay = parseFloat(delay.value);
   duration = parseFloat(duration.value);
   if(delay < 0 || delay > 2592000 || isNaN(delay)) {
     delay.focus();
     alert('AutoApprovalDelayInSeconds is invalid');
     return;
   }
   if(duration < 30 || duration > 31536000 || isNaN(duration)) {
     duration.focus();
     alert('AssignmentDurationInSeconds is invalid');
     return;
   }
   // all input appears to be valid so send it
   form.submit(); 
 };

Restrict input type=number to its min or max if it is out of range

Actually input type=number only handles and not allows user to submit the form if the entered number is not in range

Input type number max value not working

You can read the max attribute and then use it in a condition.:

$('.plus').on('click', function(e) {    var val = parseInt($(this).prev('input').val());    var max = parseInt($(this).prev('input').attr('max'));    if(val < max) {      $(this).prev('input').attr('value', val + 1);    }});
$('.minus').on('click', function(e) {    var val = parseInt($(this).next('input').val());    if (val !== 0) {        $(this).next('input').attr('value', val - 1);    }});

body {  background-color:#eeeeee;  margin: 40px;}
.minus,.plus {    border: none;    padding: 10px;    width: 40px;    font-size: 16px;}
input[type=number].quantity::-webkit-inner-spin-button {    -webkit-appearance: none;     margin: 0; }
.quantity {    padding: 10px;    border: none;    width: 40px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="quantity-block">    <input class="minus" type="button" value="-">    <input type="number" value="1" class="quantity" size="4" min="1" max="5"/>    <input class="plus" type="button" value="+"></div>