Why is disabling form submission affecting min and max attributes?

Question

I'm doing some validation on a HTML form using min and max attributes. I also want to prevent form submission if the submit button is clicked once to prevent multiple form submissions before a page is reloaded.

Here's the inline code for disabling the button:

<input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;this.form.submit();">

Here's the number input field code:

<input type="number" name="endNo" placeholder="END" min="5" max="20">

If I include the inline JS for the submit button, the min and max validation doesn't work. When removed, it seems to work just fine. Why is this happening and how can I satisfy both conditions, disable the button once clicked while still validating the min and max values for the number input field?

I'm using google chrome.

Answer 1

The submit method on form element does what it promises, it just submits the form, doesn't do a validation. You can manually do validation with the checkValidity method.

<input type="submit" name="name" value="REGISTER" 
    onclick="if(this.form.checkValidity()){this.disabled=true;this.form.submit();}">