Javascript：需要屬性的空輸入

我創建了一個表單，只要具有所需屬性的輸入為空，該按鈕將保持禁用狀態。

當僅填寫具有 required 屬性的輸入時，將啟用該按鈕。

如何用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>

基本上，這是一種常見的形式。如果用戶沒有填寫必填欄位，他將無法訪問下一步。例如登錄表單：如果用戶沒有填寫“電子郵件”和“密碼”輸入，則無法點擊“下一步”按鈕。這是相同的原理。

uj5u.com熱心網友回復：

這段代碼應該可以作業。

我認為你應該改變一些奇怪的事情。

1. 您沒有eventListener，因此一旦加載檔案，它將檢查輸入是否具有值（始終為""）
2. input你在has屬性中有幾個東西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>

標籤：

上一篇：如何在Java中驗證用戶輸入？[復制]

下一篇：產品頁面專案驗證PHP