3

我有一个使用 jQuery Validate 验证的表单。我希望能够在表单无效时禁用提交按钮，但我不确定最佳方法。要禁用按钮，我可以简单地这样做

$("#clientConfigurationForm input[type=submit]")
     .prop("disabled", !clientConfigValidation.valid());

问题是我把这段代码放在哪里？似乎跟踪所有更改的唯一方法是在unhighlight和中复制代码highlight。

有没有更好的方法来解决这个问题？

4

2 回答 2

2

当输入改变时我会执行它。

$('#yourForm input, #yourForm select, #yourForm textarea').on('change', checkForm);

function checkForm(){
    $("#clientConfigurationForm input[type=submit]")
        .prop("disabled", !clientConfigValidation.valid());
}
于 2013-09-17T11:15:34.260 回答
1

引用 OP 的评论：

“这并不完全奏效，因为如果我启用和禁用一个复选框，那么表单输入会禁用然后再次启用，此时 clientConfigValidation.valid() 说 true 但是，在提交时，它意识到它实际上不是有效的......非常奇怪的”

这是由有关复选框值何时实际更改的时间问题引起的。

要修复它，请将您的事件更改change为一个click事件，以更立即地捕获您的复选框和单选按钮。这似乎并没有改变其余输入元素的行为方式，因为您必须click在使用它们时对它们进行操作change。

$('input, select, textarea').on('click', checkForm);

function checkForm(){
    $("input[type=submit]")
        .prop("disabled", !($('#clientConfigurationForm').valid()));
}

工作演示：http: //jsfiddle.net/8umJ6/

如果您发现一种输入类型相对于另一种输入类型有任何问题，您可以通过为不同的输入类型指定不同的事件来调整代码。

$('input[type="checkbox"], input[type="radio"]').on('click', checkForm);

$('input[type="text"], select, textarea').on('change', checkForm);

function checkForm(){
    $('input[type="submit"]')
        .prop("disabled", !($('#clientConfigurationForm').valid()));
}
于 2013-09-17T15:37:46.873 回答