时间戳

首页 > 解决方案 > Javascript 表单验证可能不起作用

javascript - Javascript 表单验证可能不起作用

问题描述

我知道这很愚蠢，但我不知道为什么我的验证功能不起作用。它一直闪烁“需要填写两个输入！！！” . 请帮助我

这是我的代码：

<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;
}

标签： javascriptformsvalidation

解决方案

如评论中所述，第一次进行验证时，您将删除您的error元素。它完成得很好，但后果很严重。第二次验证发生，document.getElementById('error')会给你undefined，导致error.innerHTML=失败，这意味着函数不返回false或阻止默认，所以submit事件可以自由地继续畅通无阻。

不要删除 error，而是清空它（与填充它的方式相同）。

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

推荐阅读