День добрый, господа!
Не могу реализовать проверку полей на каждом шаге, подскажите, как это сделать?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="js/steps_registration.js"></script>
<script type="js/1.js"></script>
</head>
<body>
<div class="wrapper">
<form action="#" method="post">
<div class="step">
<p class="step">Введите своё имя</p>
<p><strong>Имя:</strong><input type="text" name="msg" id="msg" placeholder="Введите имя"></p>
</div>
<div class="step">
<p class="step">Введите вашу фамилию</p>
<p><strong>Фамилия:</strong><input type="text" name="surname" placeholder="Введите фамилию"></p>
</div>
<div class="step">
<p class="step">Введите ваш email</p>
<p><strong>Email:</strong><input type="text" name="email" placeholder="Введите ваш email"></p>
</div>
<p class="talign">
<a href="#" class="back">Назад</a>
<a href="#" class="next">Далее</a>
<input type="submit" value="Завершить" onClick="Thanks();">
</p>
</form>
</div>
</body>
</html>
$(document).ready(function() {
var steps = $("form").children(".step");
$(steps[0]).show();
var current_step = 0;
$("a.next").click(function(){
if (current_step == steps.length-2) {
$(this).hide();
$("form input[type=submit]").show();
}
$("a.back").show();
current_step++;
changeStep(current_step);
});
$("a.back").click(function(){
if (current_step == 1) {
$(this).hide();
}
$("form input[type=submit]").hide();
$("a.next").show();
current_step--;
changeStep(current_step);
});
function changeStep(i) {
$(steps).hide();
$(steps[i]).show();
}
});
function Thanks(){
jQuery("body").empty(); // очищаем тело документа
jQuery("body").append("<h2><center>Спасибо!</center></h2>");
}