爲什麼我的表單不顯示驗證錯誤？

我正在嘗試執行一項簡單的任務。我想驗證表單或顯示一條消息，說明「請填寫表單！」我忽略了什麼，因爲除了信息之外的所有作品？我怎麼能做到這一點，或者我只是想失去一些東西？我曾嘗試將腳本放置在頂部和底部，但我希望放在底部，因爲我希望頁面加載速度更快，而不是暫停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

爲什麼我的表單不顯示驗證錯誤？

回答

相關問題