Javascript 表單驗證可能不起作用

Question

我知道這很愚蠢，但我不知道為什么我的驗證功能不起作用。 它一直閃爍“需要填寫兩個輸入！！！” . 請幫助我

這是我的代碼：

<div class="container">
  <h2>Login form</h2>
  <form action="signin.php" method="POST" onsubmit="return validation();">
    <h3 id='error'></h3>
    <div class="form-group">
      <label>Username:</label>
      <input name="username" type="text" class="form-control" id="userName" placeholder="Enter username">
    </div>
    <div class="form-group">
      <label>Password:</label>
      <input name="password" type="password" class="form-control" id="password" placeholder="Enter password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button name="login" type="submit" class="btn btn-default">Submit</button>
  </form>
</div>

function validation(){
    var username = document.getElementById('userName').value;
    var password = document.getElementById('password').value;
    var error = document.getElementById('error');
    if(username === "" || password === ""){
        error.innerHTML="Need to fill both input !!!"
        setTimeout(()=>error.remove(),3000);
        return false;
    }
    return true;
}

Answer 1

如評論中所述，第一次驗證發生時，您刪除error元素。 它完成得很好，但后果很嚴重。 第二次驗證發生時， document.getElementById('error')會給你undefined ，導致error.innerHTML=失敗，這意味着該函數不會返回false或阻止默認，因此submit事件可以不受阻礙地繼續進行。

與其刪除error ，不如清空它（與填充它的方式相同）。

setTimeout(() => error.innerHTML = "", 3000);

Answer 2

可能你拼錯了

getElementById('user**N**ame')

它應該是lowercase - 用戶名