JavaScript表单验证无法正常工作

Question

早上好，

我正在做一些简单的表单验证。 每当我提交表单时，都会出现错误消息，但是我可以反复向该按钮发送垃圾邮件以获取大量错误消息。 有没有一种方法可以将其更改为仅显示错误消息一次？ 我还注意到，即使我同时填充了两个字段，它仍会在控制台中快速闪烁并显示错误日志，但不会显示错误。

谁能告诉我我在做什么错？

  var uname = document.forms['signIn']['userame'].value; var pword = document.forms['signIn']['password'].value; function validateMe (e) { if (uname.length || pword.length < 1 || '') { var container = document.getElementById('error-container'); var errorMsg = document.createElement('div'); errorMsg.className = 'error-message'; errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>'; container.appendChild(errorMsg); console.log('An error occured'); return false; } } 

 <form id="signIn" action='#'> <div class="boxed left-floater"> <h1 class="heading-large margin-top">Sign in</h1> <div id="error-container"></div> <div class="form-group"> <label class="form-label-bold" for="username">Username</label> <input class="form-control log-in-form-control" id="username" name="username" type="text"> </div> <div class="form-group"> <label class="form-label-bold" for="password">Password</label> <input class="form-control log-in-form-control" id="password" type="password" name="password"> </div> <div> <a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a> <button class="button clear right-floater" type="submit" onclick="validateMe();">Sign In</button> </div> </div> </form> 

小提琴

Answer 1

这是完整的工作代码

 var uname = ""; var pword = ""; function validateMe(e) { e.preventDefault(); uname = document.forms['signIn']['username'].value; pword = document.forms['signIn']['password'].value; if (uname.length || pword.length < 1 || '') { var container = document.getElementById('error-container'); var errorMsg = document.createElement('div'); errorMsg.className = 'error-message'; errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>'; container.appendChild(errorMsg); console.log('An error occured'); return false; } return true; } 

 <form id="signIn"> <div class="boxed left-floater"> <h1 class="heading-large margin-top">Sign in</h1> <div id="error-container"></div> <div class="form-group"> <label class="form-label-bold" for="username">Username</label> <input class="form-control log-in-form-control" id="username" name="username" type="text"> </div> <div class="form-group"> <label class="form-label-bold" for="password">Password</label> <input class="form-control log-in-form-control" id="password" type="password" name="password"> </div> <div> <a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a> <button class="button clear right-floater" type="submit" onclick="validateMe(event);">Sign In</button> </div> </div> </form> 

Answer 2

您必须清除container的内容以避免重复元素。 以下是几点注意事项：

• 你想获得的userame，而不是用户名在你的提琴。 可能是拼写错误。
• 保持input type=submit而不是button
• 将该event传递给您的validateMe function以防止发布默认操作。
• 始终在函数内移动变量以获取实际值

 function validateMe(e) { e.preventDefault(); var uname = document.forms['signIn']['username'].value; var pword = document.forms['signIn']['password'].value; var container = document.getElementById('error-container'); container.innerHTML = ''; //Clear the contents instead of repeating it if (uname.length < 1 || pword.length < 1) { var errorMsg = document.createElement('div'); errorMsg.className = 'error-message'; errorMsg.innerHTML = '<span class="heading-large">Please enter a valid username or password</span>'; container.appendChild(errorMsg); console.log('An error occured'); return false; } } 

 <form id="signIn" action='#'> <div class="boxed left-floater"> <h1 class="heading-large margin-top">Sign in</h1> <div id="error-container"></div> <div class="form-group"> <label class="form-label-bold" for="username">Username</label> <input class="form-control log-in-form-control" id="username" name="username" type="text"> </div> <div class="form-group"> <label class="form-label-bold" for="password">Password</label> <input class="form-control log-in-form-control" id="password" type="password" name="password"> </div> <div> <a class="right-floater forgotten-password" href="forgottenpassword.html">Forgotten Password</a> <input value="Sign In" class="button clear right-floater" type="submit" onclick="validateMe(event);" /> </div> </div> </form> 

更新小提琴

编辑 - if condition失败并已相应更新