Я пытаюсь выполнить простую задачу. Я хочу подтвердить форму или показать сообщение с сообщением «Пожалуйста, заполните форму!» Что я пропускаю, потому что все работает, кроме сообщения? Как я могу достичь этого, или просто я просто что-то пропустил? Я попытался разместить сценарий сверху и снизу, но я хочу внизу, потому что хочу, чтобы страница загружалась быстрее и не приостанавливалась для 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 →" 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;
Это не имеет значения, где вы положили его, так как вы используете 'window.onload' для его инициализации. – Barmar
Он отлично работает здесь: http://jsfiddle.net/barmar/bwuzeg1o/2/ Мне пришлось удалить атрибуты 'required', потому что они не позволяют отправить форму, поэтому обработчик отправки не запускается. – Barmar