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.

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?

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>