如何在浏览器验证具有“required”属性的字段后禁用“提交”按钮？

Question

我们使用以下jQuery来禁用提交按钮以防止双重提交（服务器速度慢！）。

jQuery(document).ready(function($){

    /*SENDE BTN INAKTIV STELLEN*/
    $("input[type=submit]").click(function() {
        $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
    });

});

但是，在浏览器验证HTML表单中具有“required”属性的所有字段后，我们如何触发脚本？

Answer 1

EDIT: I found a much more elegant way to do this. Please accept this answer if it works for you.

 jQuery(document).ready(function($){

/*SENDE BTN INAKTIV STELLEN*/
    $("input[type=submit]").click(function() {

        var myform = $('#theform');

        //checks if the form is valid
        if(myform[0].checkValidity())
        {
             $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
        }
    });

});


//this is slightly awkward but it works

jQuery(document).ready(function($){

/*SENDE BTN INAKTIV STELLEN*/
$("input[type=submit]").click(function() {
    var flag = true;

    $('[required]').each(function(){
        if(!$(this).val()) 
           flag = false;
    });

    if(flag){
       $(this).css({'opacity':'0.5','cursor':'wait'}).attr('disabled','disabled');
    }
    else
       return false;
});

});