Preventing double submit on successful validation

[rhelms]

Is there something built in that will prevent double submission of a form, once it has passed validation, and the form has been initially submitted?

[rhelms]

This is the onSuccess function that I'm using to prevent a form being submitted twice.

onSuccess: function ($form) {
    var submitted = $form.data('submitted');
    if (submitted === true) {
        return false;
    }
    $form.data('submitted', true);
    return true;
}

[victorjonsson]

It's not supposed to submit the form multiple times. Could you please provide me with your form markup?

[rhelms]

Hi Victor

Small confession to make first, we are using an old version in the branch that the error was reported in (2.2.beta.13 is in the comments of the jquery.form-validator.js). However, there's another branch of pending work that will be released soon, and that has 2.3.33, so perhaps I'll try to reproduce the issue there.

In the meantime, the complete HTML is probably a bit much, so I'll include the important bits. We're using Bootstrap and Twig.

<form role="form" action="/voice/porting_in/step4" method="POST" class="porting_form">
<input type="hidden" name="{{ csrf_key }}" value="{{ csrf_token }}" />
<input type="hidden" name="paf_id" id="paf_id" value="{{ paf_id }}" />
... lots of Bootstrap style code here
<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <button class="btn btn-default" type="button" id="back">Back</button>
            <button type="submit" class="btn btn-primary">Save and Next</button>
        </div>
    </div>
</div>
</form>

Also in the template is a Twig block for our JS that gets included at the end of the page.

/scripts/validate.js is a library of custom validators, all doing $.formUtils.addValidator({}); statements.

{% block footerscripts %}
    {{ parent() }}

    <script type="text/javascript" src="/plugins/form-validator/jquery.form-validator.min.js"></script>
    <script type="text/javascript" src="/scripts/validate.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            // Other JS events set up here
            $.validate({
                form: '.porting_form',
                onSuccess: function ($form) {
                    var submitted = $form.data('submitted');
                    if (submitted === true) {
                        return false;
                    }
                    $form.data('submitted', true);
                    return true;
                }
            });
        });
    </script>
{% endblock %}

The onSuccess event is the new stuff I put in to prevent the double submit. I'll try to recreate the issue with the latest lib, and report back.

[rhelms]

Using 2.3.33, I was able to reproduce the issue by completing the form with all valid values, and quickly double tapping the submit button.

The nginx access log entries, are as shown:

192.168.20.1 - - [05/Aug/2016:11:29:22 +1000] "POST /voice/porting_in/step1 HTTP/1.1" 499 0 "http://portal.vagrant/voice/porting_in/new/step1" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Geck
o) Chrome/52.0.2743.82 Safari/537.36"
192.168.20.1 - - [05/Aug/2016:11:29:22 +1000] "POST /voice/porting_in/step1 HTTP/1.1" 302 5 "http://portal.vagrant/voice/porting_in/new/step1" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Geck
o) Chrome/52.0.2743.82 Safari/537.36"

HTTP Status 499 is nginx specific to report that the client disconnected before the response could be returned. This matches the Chrome Network view, showing the initial POST request being cancelled, and the subsequent POST completing, resulting in a redirect to step2.

If you need any more info, please let me know.

[victorjonsson]

Okey, so this only happens if you double click the submit button? An ordinary click only submits the form once?

[rhelms]

Yes. So, I thought I'd ask the question if the functionality to prevent a double click existed, either as core, or as a part of a module, since prevention of double clicks would be nice to have, even if it's part of a module so it's optional.

I've not yet looked at the existing modules to see if it's even possible to hook into the onSuccess functionality via a module. But if I was going to write something that could end up being optional, this is the approach I would take.