2014-10-17 3 views
1

Я пытаюсь выполнить простую задачу. Я хочу подтвердить форму или показать сообщение с сообщением «Пожалуйста, заполните форму!» Что я пропускаю, потому что все работает, кроме сообщения? Как я могу достичь этого, или просто я просто что-то пропустил? Я попытался разместить сценарий сверху и снизу, но я хочу внизу, потому что хочу, чтобы страница загружалась быстрее и не приостанавливалась для 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> 

JS

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; 
+0

Это не имеет значения, где вы положили его, так как вы используете 'window.onload' для его инициализации. – Barmar

+1

Он отлично работает здесь: http://jsfiddle.net/barmar/bwuzeg1o/2/ Мне пришлось удалить атрибуты 'required', потому что они не позволяют отправить форму, поэтому обработчик отправки не запускается. – Barmar

ответ

0

Если вы хотите использовать свои собственные проверки вместо браузера встроенной проверки требуемых полей, удалите required атрибуты из ваших <input> тегов.

DEMO

+0

Ничего себе, спасибо. Я думал, что сойду с ума. – user3758480

Смежные вопросы