Javascript 显示错误后验证表单
我有一个输入用户名和密码的表单。如果保留为空，则会显示一个错误，但当填写其中一个输入框并单击“提交”按钮时，该错误不会消失Javascript 显示错误后验证表单,javascript,html,Javascript,Html,我有一个输入用户名和密码的表单。如果保留为空，则会显示一个错误，但当填写其中一个输入框并单击“提交”按钮时，该错误不会消失 <script type="text/javascript"> function chck() { var valid = true; var pass = document.getElementById('password_box').value; var user = document.getElemen
<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>
函数chck（）{
var valid=true；
var pass=document.getElementById（'password_box'）。值；
var user=document.getElementById（'username_-box'）。值；
如果（用户=“”）{
document.getElementById（'password-error'）。innerHTML=“*请输入用户名继续…”；
document.getElementById（'username_-box'）.style.borderColor=“#DC3D24”；
document.getElementById（'username_-box'）.style.backgroundColor=“栗色”；
有效=错误；
}
如果（通过=“”）{
document.getElementById（'user-error'）.innerHTML=“*请输入密码继续…”；
document.getElementById（'password_box'）.style.borderColor=“#DC3D24”；
document.getElementById（'password_box'）.style.backgroundColor=“栗色”；
有效=错误；
}否则{
有效=真；
}
返回有效；
}
只有我同时填写这两个框，错误才会消失。我想在其中一个框中填入文本后立即隐藏错误。谢谢你能给我的任何帮助。尝试使用HTML5……只需添加required属性，并使用重置输入来清除值
<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>
的“按键”上运行chck（）
像这样：
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;
}