如何禁用提交按鈕，直到使用 html 和香草 js 填寫所有必填字段

Question

如何在用戶輸入所有字段之前禁用提交按鈕，以及如何在提交表單上使用事件監聽器。

 <form action='index.html' id="form-user" onsubmit="init()"> <input type="text" name="username" id="username" placeholder="username"> <input type="email" name="email" id="email" placeholder="email"> <input type="password" name="password" id="password" placeholder="password"> <button type="submit" name="submit" id='button-send'>SUBMIT</button> </form>

const init = function () {
  let username = document.getElementById("username").value;
  let password = document.getElementById("password").value;
  let email = document.getElementById("email").value;
  alert(username,password,email)
};

Jsfiddle鏈接

Answer 1

使用布爾值設置驗證 object 以記錄您的所有值是否都滿足驗證。

然后我將遍歷所有輸入並為每個輸入添加一個事件偵聽器。 在此示例中，我檢查了每個字符中是否至少有一個字符，但您可能希望對此進行擴展。

最后，循環驗證 object 並檢查所有值是否為真。 如果是，請從按鈕中刪除disabled屬性。

 let inputs = document.querySelectorAll('input'); let buttonSend = document.getElementById('button-send'); let inputValidator = { "username": false, "email": false, "password": false } inputs.forEach((input) => { input.addEventListener('input', () => { let name = event.target.getAttribute('name'); if (event.target.value.length > 0) { inputValidator[name] = true; } else { inputValidator[name] = false; }; let allTrue = Object.keys(inputValidator).every((item) => { return inputValidator[item] === true }); if (allTrue) { buttonSend.disabled = false; } else { buttonSend.disabled = true; } }) })

 <form action='index.html' id="form-user"> <input type="text" name="username" id="username" placeholder="username"> <input type="email" name="email" id="email" placeholder="email"> <input type="password" name="password" id="password" placeholder="password"> <button type="submit" name="submit" id='button-send' disabled>SUBMIT</button> </form>

Answer 2

這可能不是您想要的，但您只需在輸入字段中使用required屬性即可獲得幾乎相同的效果：

 <form action='index.html' id="form-user"> <input type="text" name="username" id="username" placeholder="username" required> <input type="email" name="email" id="email" placeholder="email" required> <input type="password" name="password" id="password" placeholder="password" required> <button type="submit" name="submit" id='button-send' >SUBMIT</button> </form>

Answer 3

使用 onBlur 事件將確保用戶已訪問每個字段。 您可能還想檢查該字段包含一個值，為此您可以添加 HTML 必需屬性。

 var isDirty = { username: false, password: false, email: false } const init = function() { let incompleteItems = getIncompleteItems(); if(incompleteItems.length > 0) { alert(`${incompleteItems} requires a value.`); return; } let username = document.getElementById("username").value; let password = document.getElementById("password").value; let email = document.getElementById("email").value; alert(`values: ${username}, ${email}, ${password}`); }; const onChange = function(e) { isDirty[e.id] = true; } const getIncompleteItems = function() { let incomplete = ""; for (const [key, value] of Object.entries(isDirty)) { if(value === false) { if(incomplete.length > 0) { incomplete += `, ${key}`; } else { incomplete = key; } } } return incomplete; }

 <form method='GET' id="form-user" onsubmit="init()"> <input type="text" name="username" id="username" placeholder="username" onBlur="onChange(this)"> <input type="email" name="email" id="email" placeholder="email" onBlur="onChange(this)"> <input type="password" name="password" id="password" placeholder="password" onBlur="onChange(this)"> <button type="submit" name="submit" id='button-send'>SUBMIT</button> </form>

Answer 4

創建一個驗證 function，它將檢查所有驗證並在驗證失敗時設置按鈕的禁用屬性，反之亦然。 對所有字段的每次更改調用驗證 function。

您可以使用 oninput 事件

<input type="text" oninput="validate()">