如何在浏览器验证具有 '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;
});

});

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

How to disable submit button AFTER browser has validated fields with 'required' attribute?

jquery

html

validation

required