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.

something else is wrong, there's no difference for me if I have the onclick code or not — Jaromanda X, Oct 17 '16 at 01:11
@JaromandaX Are you certain your browser isn't preventing submission if you try to enter a value greater than 20 in this case? That's the problem I'm facing. — andromeda, Oct 17 '16 at 01:14
Chrum lets me submit in either case, but a message does pop up briefly if there's no `this.disabled=false` - however, the end result seems to be the submission goes ahead either way — Jaromanda X, Oct 17 '16 at 01:17
http://stackoverflow.com/questions/9855656/how-to-submit-a-form-using-javascript — Parth Chokshi, Oct 17 '16 at 01:18
@JaromandaX I'd like to have the min validation which works perfectly if I don't include the inline JS but I also need a way to disable the submit button once it is clicked once. — andromeda, Oct 17 '16 at 01:23

score 2 · Accepted Answer · answered Oct 19 '16 at 07:22

2

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

answered Oct 19 '16 at 07:22

Gokhan Kurt

8,239
1
27
51

This solved my dilemma so elegantly. The `checkValidity()` method addresses exactly what I was after. – andromeda Oct 19 '16 at 08:01

score 1 · Answer 2 · answered Oct 19 '16 at 05:59

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.

As you said, you want to prevent form submission, so you must point your bullets to the <form> tag. When you need to handle the submit event, always attack the <form>, so let's add an onsubmit attribute:

<form method="post" action="my-script.php" onsubmit="return something();">

Now let's add a little funtion which tells to our <form> what to do. In this case let's show the result from the input:

<script type="text/javascript">
function something() {
    var v = document.getElementById( "endNo" ).value;
    alert( "The value is " + v );
    return false;
}
</script>

I added some id attribute to the input to be handled by javascript:

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

The submit button only shows the disabled event in the onclick attribute because return false is already being executed on the <form> tag:

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

The whole tag looks like this:

<script type="text/javascript">
function something() {
    var v = document.getElementById( "endNo" ).value;
    alert( "The value is " + v );
    return false;
}
</script>

<form method="post" action="" onsubmit="return something();">
<input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20">
<input type="submit" name="name" value="REGISTER" onclick="this.disabled=true;">
</form>

See it in action: https://jsfiddle.net/darioferrer/mfs3adqm/

Check some similar cases:

Moussa Khalil · Answer 3 · 2016-10-19T06:54:09.670

It would seem this.form.submit() is bypassing the the min/max checks even if you do it in the console (getting form by id then calling submit). I don't think this has to do with your setup.

Try this approach

<form>
  <input type="number" id="endNo" name="endNo" placeholder="END" min="5" max="20" required> <!-- I assume it is required? -->
  <input type="button" id="fakeSubmit" name="name" value="REGISTER"     onclick="submitIfValid()"> <!-- fake submit -->
  <input type="submit" id="submitButton" style="visibility:hidden"> <!-- Actual submit -->
</form>

<script>
 function submitIfValid()
 {
    if(document.getElementById('endNo').value < document.getElementById('endNo').getAttribute("min") || document.getElementById('endNo').value > document.getElementById('endNo').getAttribute("max")) // Get the attributes dynamically and check
     {
       document.getElementById('submitButton').click(); // Simulate a standard click to show error
     }  
     else
     {
       document.getElementById('fakeSubmit').disabled = true; // Disabled it, we got our value
       document.getElementById('submitButton').click(); // Actual submission
     }

 }
</script>

Make sure you add your server side checks. NEVER trust jQuery or javascript

Note: If left blank, it would be < than the min

Note 2: If you are open minded towards jQuery, the form validation becomes a lot easier ($(formid).valid()) which makes it easier than my approach and in case of multiple fields to check. You can read about it here.

mike510a · Answer 4 · 2016-10-18T16:29:34.820

0

You could change the input type from submit to button to stop it from submitting right away.

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

edited Oct 18 '16 at 16:29

answered Oct 17 '16 at 01:58

mike510a

2,102
1
11
27

There really wan't any syntax error. While isolated, both cases work as expected. It is only when combined that the validation fails. Nonetheless, I did try out your solution and still it doesn't produce the desired result. The chrome notification appears briefly but the form submits anyway. – andromeda Oct 17 '16 at 02:25
1

Setting the `.disabled` property to (boolean) `true` is *not* a JS error, it is correct and normal procedure; setting it to the string `"true"` is incorrect. Also, you don't need the `javascript:` label in an inline event handler. – nnnnnn Oct 17 '16 at 02:33

Why is disabling form submission affecting min and max attributes?

4 Answers4