Question

我有一个输入用户名和密码的表单。如果它们留空，则会显示错误，但是当填写其中一个输入框并单击提交按钮时，那里的错误就不会消失。

      <script type="text/javascript">

      function chck() {
      var valid = true;
    var pass = document.getElementById('password_box').value;
    var user = document.getElementById('username_box').value;
            if (user == '') {
        document.getElementById('password-error').innerHTML = "* Please enter username to proceed...";
        document.getElementById('username_box').style.borderColor = "#DC3D24";
            document.getElementById('username_box').style.backgroundColor = "maroon";
        valid = false;
    }
    if (pass == '') {
        document.getElementById('user-error').innerHTML = "* Please enter password to proceed...";
        document.getElementById('password_box').style.borderColor = "#DC3D24";
            document.getElementById('password_box').style.backgroundColor = "maroon";
       valid = false;
    }else{
                   valid = true;
        }
                return valid;
    }

      </script>
</head>
<body>
      <form action="checkup.php" method="post" name="checkup">
      <div class="login-box">
           <input type="text" placeholder="Username goes here.." id="username_box" class="box" name="username">
           <input type="password" placeholder="Password goes here.." id="password_box" class="box" name="password">          <BR>
           <input type="submit" class="button" id="submit_button" value="LogMeIn" onClick="return chck()">
           <input type="button" class="button" id="clear_button" value="Clear">
      </div>
      </form>        <BR>
      <center>
      <div class="error-area" id="message">
        <p id="password-error">
      </p>
      <p id="user-error">
      </p>

      </div>
      </center>

只有当我填写两个框时，错误才会消失。我想在其中一个框填入文本后立即隐藏错误。谢谢你能给我的任何帮助。

Answer 1

尝试使用HTML5 ......只需添加必需属性并使用重置输入

清除值

<form action="checkup.php" method="post" name="checkup">
  <div class="login-box">
       <input type="text" placeholder="Username goes here.." id="username_box" class="box" name="username" required title="* Please enter username to proceed...">
       <input type="password" placeholder="Password goes here.." id="password_box" class="box" name="password" required title="* Please enter password to proceed...">          <BR>
       <input type="submit" class="button" id="submit_button" value="LogMeIn" onClick="return chck()">
       <input type="reset"  value="Clear">
  </div>
  </form>

或者如果您想使用现有代码实现此目的，请尝试使用 onfocus事件来清除错误消息。希望这个肝脏

Answer 2

您可以针对“username_box”和“password_box”元素在chck()事件上运行"keypress"。

像这样：

document. getElementById("username_box").addEventListener("keypress", function () {
  chck();
}, true);

但稍稍更新chck：

function chck() {
  var valid = true;
  var pass = document.getElementById('password_box').value;
  document.getElementById('password-error').innerHTML = "";
  var user = document.getElementById('username_box').value;
  document.getElementById('user-error').innerHTML = "";
  document.getElementById('password_box').setAttribute("style", "");
  document.getElementById('username_box').setAttribute("style", "");
  if (user == '') {
    document.getElementById('password-error').innerHTML = "* Please enter username to proceed...";
    document.getElementById('username_box').style.borderColor = "#DC3D24";
    document.getElementById('username_box').style.backgroundColor = "maroon";
    valid = false;
  }
  if (pass == '') {
    document.getElementById('user-error').innerHTML = "* Please enter password to proceed...";
    document.getElementById('password_box').style.borderColor = "#DC3D24";
    document.getElementById('password_box').style.backgroundColor = "maroon";
    valid = false;
  }
  else{
    valid = true;
  }
  return valid;
}

显示错误后验证表单

2 个答案: