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

Keeping submit button disabled until dynamically created required fields are filled

本文关键字：创建 动态 填充 字段 按钮 提交 于禁用 状态      更新时间：2023-09-26

我想保持提交按钮处于禁用状态，直到填写必填字段。

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

<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();" />

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

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

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;
}
  • 从已禁用属性集的按钮开始。
  • 将更改事件侦听器添加到表单元素（假设它是所有输入的父级）元素）
  • 在"更改处理程序"中，检查是否填写了所有必填字段，如果是，则"启用提交"按钮

即使用户稍后删除在必填字段中输入的值，提交按钮也将再次被禁用，这也工作得很好

相关文章：