jQuery 验证：仅在表单成功验证后启用提交按钮

Question

我正在使用 jQuery Validate 来验证表单。各个字段根据需要进行验证，但我的项目要求仅在所有验证检查成功通过后才激活表单的提交。（我知道这样做的用户体验问题，决定权在我手中。）

我很难立即启用提交按钮，即使我知道验证已成功。在用户触发另一个 change 事件之前，我的代码不会 return 为真：

$('#submit').attr('disabled', 'disabled');

$('form').validate({
    onfocusout: function(element) { $(element).valid(); }, //I need each field to validate as it is typed into, per a client requirement
    rules: {
        name_required: "required",
        name_number: "number",
        name_required_select: "required"
    }
});

//*THIS* is where I'm going wrong
$('input').on('blur keyup', function(){
    if( $('form').validate().checkForm() ){
        $('#submit').attr('disabled', '');  
    }
});

我知道出了点问题，因为如果我从控制台调用 $('form').validate().checkForm()，我会看到个人验证检查通过（无需单击 in/change 任何其他字段），并且我得到 true.出于某种原因，我无法在绑定到 keyup 和我的 input 上的其他事件时得到它。

Test case to demonstrate problem.

在第一个字段中输入任何内容，select在第三个字段中输入任何内容。
提交按钮应该激活（现在满足所需的验证规则）。
在任何字段内单击，或在可选字段中输入值，将激活我的提交按钮。

期望的行为：

我需要提交按钮在通过验证检查后立即激活，而无需返回并更改某些内容的额外步骤。

我试过的：

将所有 input 绑定到 change、keyup 和 blur 我能想到的每个组合都无济于事。
使用 setInterval 并等待 valid() return 为真，这很有效，但我经常担心运行那个（这个表格很长而且用户将在页面上一会儿）。
我知道库有一个 validate() 方法，但出于某种原因，它触发了我当时不想要的验证检查 (if( $('form').validate() ){ ...)。我只需要一个布尔值 true/false，因此该方法不适合我的目的。我觉得我需要使用 checkForm()，它在调用时不会触发验证。

Answer 1

您的 select 框需要一个额外的更改事件，因为如果它是您最后更改的内容，那么表单将在此之前生效。您还需要将 'disabled' 设置为 true 或 false.

$('#submit').attr('disabled', true);

...

//*THIS*
function checkValidation() {
    if ( $('form').validate().checkForm() ) {
        $('#submit').attr('disabled', false);  
    }
}

$('input').on('blur keyup', checkValidation);

$('select').on('change', checkValidation);

您甚至可以在 input 上使用 change 事件而不是 blur 和 keyup`，所以如果您愿意，可以尝试一下。

jQuery 验证：仅在表单成功验证后启用提交按钮

jQuery Validate: Enable submit button only after form successfully validates

jquery

jquery-validate