Why is disabling form submission affecting min and max attributes?

google-chrome, html, javascript

Solution

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();}">

Problem

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.

Original source

Related problems