Question

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

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

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

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

Answer 1

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

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

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

Answer 2

引用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()));
}

表单无效时禁用提交按钮

2 个答案: