保持提交按钮处于禁用状态，直到动态创建的必填字段被填充答案

【问题标题】：Keeping submit button disabled until dynamically created required fields are filled保持提交按钮处于禁用状态，直到动态创建的必填字段被填充
【发布时间】：2013-10-17 07:10:36
【问题描述】：

我希望在填写必填字段之前保持提交按钮处于禁用状态。

首先，我发现了一些关于这个问题的问题，但问题是我有一些必填字段而不是必填字段，而且我正在动态创建这些字段。这是一个例子：

<input type="text" id="releaseartist" name="releaseartist" required="true" placeholder="Required Field"/>

我也有这样的输入，这就是我动态创建它们的方式，

var trackartistinput = document.createElement('input');
trackartistinput.setAttribute('type', "text");
trackartistinput.setAttribute('id', "trackartist" + i);
trackartistinput.setAttribute('name', "trackartist");
trackartistinput.setAttribute("required", true);
trackartistinput.setAttribute("placeholder", "Required Field");
trackartistinput.setAttribute("class", "required");

这是我的提交按钮：

<input type="submit" class="btn btn-primary" value="Submit" id="form-submit" onclick="return myConfirm();" />

【问题讨论】：

只需为提交按钮编写一个验证即可。
@Ducaz035，如上所述，您可以编写一个验证器来检查单击提交按钮时是否已填写必填字段...？
另外，如果你真的想要，你可以在动态生成每个必填字段时添加一个 onChange 类型的事件处理程序，并且该事件可以检查是否所有必填字段都已填写跨度>
我当然可以添加一个事件处理程序，我想知道如何检查所有必需的输入字段。我需要一个循环给他们。你能给我看一个sn-p吗？

标签： javascript jquery html validation

【解决方案1】：

您可以检查到目前为止在文档中添加的必填字段的计数，并根据计数将提交按钮的属性设置为禁用或启用。

您可以按如下方式计算所需的类组件：

var numItems = $('.required').length

编辑

要检查所有必需的类元素是否已填充，您可以检查如下：

var required_ele = document.getElementsByClassName('required');
var allfilled=true;
for (var i = 0; i < required_ele.length; ++i) {
    var item = required_ele[i];  
    if(item.value.length==0){
      allfilled=false;
    }
}
if(allfilled){
   document.getElementById("form-submit").disabled = false;
}
else{
  document.getElementById("form-submit").disabled = true;
}

【讨论】：

我猜我没有正确得到这个答案，检查必填字段后我会怎么做？我将如何确定它们是否被填充？
您可以找到所需的组件数量，并使用它可以启用/禁用提交按钮检查问题的编辑
对此我很抱歉，但我仍然不知道如何使用这些信息
现在好了，我将通过 document.getElementsByClassName('required'); 将它们作为一个数组来处理是有道理的。，非常感谢，我会尽快尝试。
很高兴它对您有所帮助。

【解决方案2】：

从设置了禁用属性的按钮开始。
向表单元素添加更改事件监听器（假设它是所有输入的父元素元素）
在更改处理程序中检查是否填写了所有必填字段，如果是，则启用提交按钮

即使用户稍后删除在必填字段中输入的值，这也能正常工作，提交按钮将再次变为禁用

【讨论】：

感谢算法，这有助于概述解决方案，但我仍然对“检查是否填写了所有必填字段”这部分有问题。
@Ducaz035 有很多方法可以帮助您进行验证本身。 jQuery Validation plugin 可能是一个好的开始。