javascript - 保持提交按钮禁用,直到填充动态创建的必填字段

标签 javascript jquery html validation

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

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

<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;
}

关于javascript - 保持提交按钮禁用,直到填充动态创建的必填字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19420378/

相关文章:

javascript - 使用javascript为html链接中的id赋值

javascript - 使用 PKCS #7(不透明)为网络签名数据

javascript - 从表单数组中获取表单内容

jQuery goMap 正在覆盖我的页脚的样式?如何停止?

javascript - 如何使用 Angular 6中的值解析电子邮件模板的动态元素

javascript - 等待 Promise.reject 或抛出错误以摆脱困境?

jquery - 双ajax函数?

javascript - 使用Jquery显示Div中其他三个元素中元素的最大宽度

javascript - 值未显示,即使它位于 HTML 中

javascript - Cordova - 下载图像并将其 move 到另一个文件夹中