禁用提交按钮，直到使用 JavaScript 填写必填字段答案

【问题标题】：Disabling Submit button until required fields are filled using JavaScript禁用提交按钮，直到使用 JavaScript 填写必填字段
【发布时间】：2023-03-23 13:11:01
【问题描述】：

我正在尝试禁用表单提交按钮，直到填写必填字段。但是，我的代码似乎没有通过条件正确循环，因为任何输入都启用了提交按钮。 https://codepen.io/ldanneman/pen/MWyGJMx?editors=0010

<form>
    <div class="form-box">
        <label for="fname">First Name<span>*</span></label>
        <input type="text" id="fname" name="First Name" placeholder="First Name" required><br>
        <label for="lname">Last Name</label>
        <input type="text" id="lname" name="Last Name" placeholder="Last Name"><br>
        <label for="email">Email<span>*</span></label>
        <input type="email" id="email" name="Email" placeholder="abc@client.com" required><br>
        <label for="phone">Phone<span>*</span></label>
        <input type="tel" id="phone" name="Phone" placeholder="111-222-3333" required><br>
        <label for="comments">Comments<span>*</span></label>
        <textarea id="comments" name="comments"  placeholder="Comments" required></textarea><br>
    
      <button class="submit" type="submit">Submit</button>

    </div>
    
    
</form>
</div>

JavaScript：

let requiredInputs = document.querySelectorAll("[required]");
let submitButton = document.querySelector(".submit");

submitButton.disabled = true;

for(let i = 0; i < requiredInputs.length; i++){
requiredInputs[i].addEventListener("input", buttonState)
};

function buttonState() {
  if (requiredInputs.value === "") {
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
}

【问题讨论】：

标签： validation form-submit disabled-control submit-button disable

【解决方案1】：

您已经接近了，但您的回调中的代码 buttonState() 不足以完成您想要的。它正在检查 requiredInputs 的值，它是 HTML Input 元素的集合。您要做的是遍历该集合中的每个项目并检查它们的值是否已设置：

function buttonState() {
  submitButton.disabled = Array.from(requiredInputs).some(x => x.value === '');
}

上面的代码将使用some()，如果任何回调结果为真，则在输入值为空字符串的情况下返回真。

【讨论】：