如何使用 jQuery 禁用表单的提交按钮，直到每个必填字段都已填写？

Question

我有一个包含多个输入、选择框和文本区域的表单。我希望禁用提交按钮，直到我根据需要指定的所有字段都填充了一个值。并且在它们都填满之后，如果 WAS 字段的字段被用户删除，我希望提交按钮再次变为禁用。

我怎样才能用 jQuery 完成这个？

Answer 1

在提交按钮上设置禁用属性。喜欢：

$('input:submit').attr('disabled', 'disabled');

并在表单字段上使用 .change() 事件。

Answer 2

从禁用按钮开始（显然）。将onkeyup 事件绑定到每个必需的文本输入，并将onchange 或onclick 绑定到选择框（以及任何单选按钮/复选框），当它触发时，检查是否已填写所有必需的输入。如果是这样，请启用该按钮。如果没有，请禁用它。

不过，这里有一个漏洞。用户可以在不触发onkeyup事件的情况下删除文本字段的值，方法是使用鼠标“剪切”文本，或者在全部删除后按住删除/退格键，然后在删除前单击按钮它。

你可以绕过第二个

• 使用onkeydown 禁用按钮并检查onkeyup 是否正常
• 单击按钮时检查有效性

Answer 3

我猜我的第一直觉是在用户开始修改任何输入时运行一个函数。像这样的：

$('#submitBtn').prop('disabled', true);
$('.requiredInput').change(function() {
   inspectAllInputFields();
});

然后我们将有一个检查每个输入的功能，如果它们被验证然后启用提交按钮...

function inspectAllInputFields(){
     var count = 0;
     $('.requiredInput').each(function(i){
       if( $(this).val() === '') {
           //show a warning?
           count++;
        }
        if(count == 0){
          $('#submitBtn').prop('disabled', false);
        }else {
          $('#submitBtn').prop('disabled', true);
        }

    });
}

如果输入值已存储或您的其他代码正在填充数据，您可能还希望在页面加载时添加对检查函数的调用，这样它仍然可以正常工作。

 inspectAllInputFields();

希望这会有所帮助， ~马特

Answer 4

我的一个想法：

• 定义一个变量 - 具有全局范围 - 并添加值 true- 在检查变量上面的值中编写一个提交函数。如果值为 true，则仅评估提交事件。
• 编写一个函数来检查输入字段中的所有值并选择字段。检查值的长度为零。如果一个字段的值长度为零，则将全局变量的值更改为 false。
• 之后，将事件“onKeydown”或“onKeyUp”添加到所有输入字段，并将事件“onChange”添加到所有选择框。

Answer 5

这里有一些全面的东西，只是因为：

$(document).ready(function() {
    $form = $('#formid'); // cache
    $form.find(':input[type="submit"]').prop('disabled', true); // disable submit btn
    $form.find(':input').change(function() { // monitor all inputs for changes
        var disable = false;
        $form.find(':input').not('[type="submit"]').each(function(i, el) { // test all inputs for values
            if ($.trim(el.value) === '') {
                disable = true; // disable submit if any of them are still blank
            }
        });
        $form.find(':input[type="submit"]').prop('disabled', disable);
    });
});

http://jsfiddle.net/mblase75/xtPhk/1/

Answer 6

我建议采用稍微不同的方法并使用 jquery 的验证 http://docs.jquery.com/Plugins/validation。您建议的策略容易出现安全漏洞。用户可以轻松地使用 firebug 启用该按钮，然后提交表单。

使用 jquery 验证是干净的，它允许您在提交时根据需要在必填字段下显示错误消息。