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 事件可以不受阻碍地继续。

不要删除错误，而是清空它(与填充它的方式相同)。

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