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

Question

我有一个具有多个输入，一个选择框和一个文本区域的表单。 我想禁用“提交”按钮，直到我根据需要指定的所有字段都填充了一个值。 在将其全部填满后，如果WAS字段被用户删除，我希望“提交”按钮再次变回禁用状态。

如何使用jQuery完成此操作？

Answer 1

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

$('#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);
        }

    });
}

如果存储了输入值或您的其他代码正在填充数据，您可能还希望在页面加载时以这种方式添加对inspect函数的调用。

 inspectAllInputFields();

希望能有所帮助，〜马特

Answer 2

这里有些全面，仅仅是因为：

$(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 3

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

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

并在表单字段上使用.change（）事件。

Answer 4

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

不过，这里有一个漏洞。 用户可以通过以下方式删除文本字段的值，而无需触发onkeyup事件：使用鼠标将文本“切出”，或者在删除所有文本后按住Delete / Backspace键，然后在删除之前单击按钮。

您可以通过

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

Answer 5

我的想法：

• 定义一个变量-具有全局作用域-并添加值true-在您的支票中编写一个高于varibale值的提交函数。 如果值为true，则仅对Submit事件进行评估。
• 编写一个函数，该函数将取消输入字段中的所有值并选择字段。 检查值的长度为零。 如果一个字段的值长度为零，则将全局变量的值更改为false。
• 之后，将事件“ onKeydown”或“ onKeyUp”添加到所有输入字段，并将事件“ onChange”添加到所有选择框。

Answer 6

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

使用jquery验证是干净的，并且如果需要的话，它允许您在必填字段下显示错误消息。