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

此代码应该有效。

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

您没有 eventListener，因此一旦加载文档，它将检查输入是否有值（始终为 ""）
你在 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>

Javascript：需要属性的空输入

Javascript: Empty input with attribute required

javascript

validation

input