我正在尝试禁用表单“提交”按钮,直到填写必填字段。但是,由于任何输入都启用了提交按钮,因此我的代码似乎无法在条件中正确循环。 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;
}
}
答案 0 :(得分:0)
您已经关闭,但是回调buttonState()
中的代码不足以完成所需的操作。它正在检查requiredInputs的值,该值是HTML Input元素的集合。您想要做的是遍历该集合中的每个项目,并检查是否设置了它们的值:
function buttonState() {
submitButton.disabled = Array.from(requiredInputs).some(x => x.value === '');
}
上面的代码将使用some()
,如果输入的值为空字符串,则如果任何回调结果为true,则返回true。