input type number - max value

Question

I have an input

<input type="number" max="100">

However, if the user write manually for example 200, the input accept it. Is it something normal ?

I can validate the entry with javascript but if there is a build in in the html input it would be great :)

Thanks

In fact, HTML provides validation when submitting via POST method. However, I don't understand the question, you should learn more about how to make a proper question in Stackoverflow before posting. — Brayam Valero, Jan 14 '22 at 13:20

score 2 · Answer 1 · edited Jan 26 '22 at 15:20

There is actually no "native" HTML way outside a form post to avoid the faulty manual entry. You could do something like this (here jquery code):

$('input[type="number"]').on('change input keyup paste', function () {
  if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
});

This code applies to all inputs of type number in case of keyboard input, pasting, changing a validation method that checks, whether a max value exists and if so Math.min() returns the lowest-valued number passed into it. If the value is not a number 0 is returned.

See a demo at JSFiddle

In Vanilla JavaScript the handler would look like this:

var numElement = document.querySelector('input[type="number"]')
numElement.addEventListener('change', validateMax);
numElement.addEventListener('input', validateMax);
numElement.addEventListener('keyup', validateMax);
numElement.addEventListener('paste', validateMax);

function validateMax() {
   if (this.max) this.value = Math.min(parseInt(this.max), parseInt(this.value) || 0);
}

See a demo of the vanilla version at JSFiddle

This handler should do the trick.

Sercan · Accepted Answer · 2022-01-14T18:40:20.313

0

I don't think there is a solution directly with HTML; the max and min attributes only work when clicking the up arrow and down arrow keys. Check out the post in the references section for more information. The image below shows that the input does not change when the up arrow button is clicked, since the max attribute is 100:

In the solution below, when the input event of the <input> element is triggered, the data input is checked by checking the max attribute with the isValid() method. You can change the disabled property of the submit button according to the result returned by the isValid() method.

const inputElement = document.querySelector('input');

function isValid(value){
  if(parseInt(value) <= inputElement.getAttribute('max'))
    return true;
  return false;
}

inputElement.addEventListener('input', function () {
    if(isValid(this.value))
      console.log("true");
    else
      console.log("false");
});

<input type="number" max="100">

References

How can I limit possible inputs in a HTML5 "number" element?

edited Jan 14 '22 at 18:40

answered Jan 14 '22 at 13:21

Sercan

4,739
3
17
36

This answer is wrong. Did you test it out? Amazed it is selected answer when it says 2 is not valid.... – epascarello Jan 14 '22 at 18:31
The `isValid()` method returns `false` if the parameter is greater than 100. Where is wrong? – Sercan Jan 14 '22 at 18:35
Try it! Enter 2 – epascarello Jan 14 '22 at 18:37
I didn't even notice. Thank you for your alert. I fixed the problem. – Sercan Jan 14 '22 at 18:41

score -1 · Answer 3 · answered Jan 14 '22 at 13:41

If you are using form, you can just mark it as required and the form does the validation for you.

document.getElementById("myForm").addEventListener("submit", function (event) {
  event.preventDefault();
  console.log(document.getElementById("myNumber").value);
});

<form id="myForm">
  <input id="myNumber" name="myNumber" type="number" max="100" required >
  <button>Send It</button>
</form>

Now if you want to know if it is valid in JavaScript directly there is built in methods for that

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault();
  console.log(document.getElementById("myNumber").value);
});


document.getElementById("check").addEventListener("click", function(event) {
  console.log("form: ", document.getElementById("myForm").checkValidity());
  console.log("input: ", document.getElementById("myNumber").validity.valid);
});

<form id="myForm">
  <input id="myNumber" name="myNumber" type="number" max="100" required>
  <button>Send It</button>
</form>

<button type="button" id="check">Check It</button>

input type number - max value

3 Answers3

References