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 - 用户名