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

StackOverflow https://stackoverflow.com/questions/16494380

  •  21-04-2022
  •  | 
  •  

سؤال

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');
    }
});
هل كانت مفيدة؟

المحلول

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');
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top