javascript/jQuery Double Submit Prevention method disables initiation of html5 attributes (e.g. Required, Pattern, etc.)

Question

The javascript/jQuery double submit prevention method I use is this:

$("#btnsubmit").click(function () {
    $("#btnsubmit").attr('disabled','disabled');
    $('#postform').submit();
});

So on submit click, the Submit Button is disabled and the form is submit. So double submit of the form will not happen. BUT. The problem now is that the html5 attributes will not initiate (e.g. Required, Pattern, etc.)

Does anyone have any ideas on how to fix this?

or maybe you can suggest alternative double submit prevention method that will not tamper with the html5 attributes?

EDIT + DANIEL PATZ ANSWER:

$('#postform').on('submit', function (e) {
    // THIS PART
    var titleLength = $("#title").val().length;
    var descriptionLength = $("#description").val().length;
    if(titleLength < 20 || descriptionLength < 150) {
        $("#ps").text("Title and Desc Problem.");
    } else {
    // UNTIL HERE
        $('[type="submit"]').prop('disabled','disabled');
    }
});

score 4 · Accepted Answer · answered May 11 '13 at 06:22

4

If you catch the submit event, it should work. http://jsfiddle.net/tcc7u/

HTML:

<form>
    <input required /><br />
    <input type="submit" />
</form>

JS:

$('form').on('submit', function (e) {
    $('[type="submit"]').prop('disabled','disabled');
});

answered May 11 '13 at 06:22

Dan P.

1,433
1
16
28

Yeah, sorry was just testing it and forgot to remove the e. – Dan P. May 11 '13 at 06:35
one last question! I want to add a few jquery validation. how do I and where do I insert it? I tried dabbling with your example but the problem is that my jquery validates but the form will still submit. See Edit – Jo E. May 11 '13 at 06:45
Never mind my edit i'll add focusout functions to validate instead. Thanks for the help! – Jo E. May 11 '13 at 06:52
If you add e.preventDefault(); inside of that if, you can stop the form from submitting. – Dan P. May 11 '13 at 07:01
So simple yet so effective. Thanks @DanielPatz – rikket Feb 24 '14 at 18:03
Shouldn't this be `$(this).find('[type=submit]').prop('disabled', true);` ? – thebjorn Apr 09 '14 at 14:32

javascript/jQuery Double Submit Prevention method disables initiation of html5 attributes (e.g. Required, Pattern, etc.)

1 Answers1