Javascript:需要属性的空输入

Question

我创建了一个表单，只要具有必需属性的输入为空，按钮就会保持禁用状态。

当只填写具有所需属性的输入时，该按钮将被启用。

如何使用javascript做到这一点？

// select all input with Attribute Required
let elReq =
document.querySelectorAll('input[required="required"]');
// if elReq input is empty = .button disabled
if (elReq.value == "") {
document.querySelector('.button').disabled = true; 

// if elReq input is filled in = .button enabled
} else {
document.querySelector('.button').disabled = false; 
}

.button {
color: #fff;
background-color: #007bff;
border: none;
display: inline-block;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
.button:disabled {
color: #a2a5a9;
border-color: #c9ced3;
background-color: #f2f2f2;
cursor: text;
}

<form class="form" id="form">
<input type="number" id="a" class="a" placeholder="000" required>
<input type="number" id="b" class="b" placeholder="0">
<input type="number" id="c" class="c" placeholder="000" required>
<input type="number" id="d" class="d" placeholder="000" required>

<input type="number" id="e" class="e" placeholder="0">     
</form>
<button type="submit" value="Ok" id="send" class="button" onclick="sum()">Ok</button>

基本上，这是一个常见的表单。如果用户不填写必填字段，他将无法访问下一步。例如，登录表单：如果用户没有填写"；电子邮件"；以及"；密码"；输入；下一个"；无法单击。这是同样的原则。

Answer 1

此代码应该可以工作。

我认为你应该改变一些奇怪的事情。

1. 您没有eventListener，因此一旦加载文档，它将检查输入是否有值(始终为""(
2. input有required属性，所以必须使用querySelectorAll而不是querySelector，并使用循环来循环它

document.querySelectorAll('[required]').forEach(item=>{
item.addEventListener('change',check)
window.addEventListener('load',check)
})
function check(){
for(let i of document.querySelectorAll('[required]')){
if (!i.value) {
document.querySelector('.button').disabled = true; 
break;      
} else {
document.querySelector('.button').disabled = false;        
}
}
}

.button {
color: #fff;
background-color: #007bff;
border: none;
display: inline-block;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
.button:disabled {
color: #a2a5a9;
border-color: #c9ced3;
background-color: #f2f2f2;
cursor: text;
}

<form class="form" id="form">
<input type="number" id="a" class="a" placeholder="000" required>
<input type="number" id="b" class="b" placeholder="0">
<input type="number" id="c" class="c" placeholder="000" required>
<input type="number" id="d" class="d" placeholder="000" required>

<input type="number" id="e" class="e" placeholder="0">     
</form>
<button type="submit" value="Ok" id="send" class="button">Ok</button>