为什么我的表单不显示验证错误？

我正在尝试执行一项简单的任务。我想验证表单或显示一条消息，说明“请填写表单！”我忽略了什么，因为除了信息之外的所有作品？我怎么能做到这一点，或者我只是想失去一些东西？我曾尝试将脚本放置在顶部和底部，但我希望放在底部，因为我希望页面加载速度更快，而不是暂停JS。为什么我的表单不显示验证错误？

<!Doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Index</title> 
    <!--[if it IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![end if]--> 

    <link rel="stylesheet" href="styles.css"> 

</head> 
<body> 

<form action="login.php" method="post" id="loginForm"> 
    <fieldset> 
     <legend>Login</legend> 
     <div><label for="email">Email Address</label> 
      <input type="email" name="email" id="email" required></div> 

     <div><label for="password">Password</label> 
      <input type="password" name="password" id="password" required></div> 

     <div><label for="submit"></label><input type="submit" value="Login &rarr;" id="submit"></div> 
    </fieldset> 
</form> 

<script src="login.js"></script> 


</body> 
</html>

function validateForm() { 
    'use strict'; 


    var email = document.getElementById('email'); 
    var password = document.getElementById('password'); 


    if ((email.value.length > 0) && (password.value.length > 0)) { 
     return true; 
    } else { 
     alert('Please complete the form!'); 
     return false; 
    } 

} 


function init() { 
    'use strict'; 


    if (document && document.getElementById) { 
     var loginForm = document.getElementById('loginForm'); 
     loginForm.onsubmit = validateForm; 
    } 

} 
window.onload = init;

来源

2014-10-17 user3758480

不要紧，你把它，因为你使用'window.onload'进行初始化。 – Barmar 2014-10-17 04:33:04

它在这里工作得很好：http://jsfiddle.net/barmar/bwuzeg1o/2/我不得不删除'required'属性，因为它们阻止它尝试提交表单，所以提交处理程序不会运行。 – Barmar 2014-10-17 04:33:55

如果你想用自己的验证，而不是浏览器的内置检查必填字段，从<input>标签移除required属性。

DEMO

来源

2014-10-17 04:35:32 Barmar

哇，完美的谢谢你。我以为我疯了。 – user3758480 2014-10-17 04:39:49

为什么我的表单不显示验证错误？

回答

相关问题