Javascript-форум - Проверка полей

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Проверка полей (https://javascript.ru/forum/events/70697-proverka-polejj.html)

Проверка полей

День добрый, господа!
Не могу реализовать проверку полей на каждом шаге, подскажите, как это сделать?

<!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>");
}

<form action="">
   <input name="user" required placeholder="Ваше имя">
   <input name="user" required placeholder="Вашa Фамилия">
   <input type="email" required placeholder="Ваш mail">
   <input type="submit" value="Отправить">
  </form>

В данном случае не работает, пробовал.
Есть вариант на javascript?:help:

проверять только на пустоту?

Да, пока форма не заполнена, выводить сообщение о необходимости заполнения. И так на каждом шаге

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="content">
		<input type="text">
		<input type="text">
		<input type="text">
		<input type="text">
		<br>
	</div>
	<br>
	<button id="send" disabled>Отправить</button>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$('input').on('input', function(){
			var a = 0;
			$('input').each(function() {
				if(this.value.length<3) {
					a = 1;
					this.style.backgroundColor = 'red';
				}
				else this.style.backgroundColor = 'green';
			});
			$('#send').prop('disabled', a);
		});
		$('#send').on('click', function(){
			$("body").empty();
			$("body").append("<h2><center>Спасибо!</center></h2>");
		});
	</script>
</body>
</html>

Да, Вы верно поняли меня, но не совсем... как при этом сохранить пошаговое приложение? чтобы на каждом шаге проверял поле?

с каждым нажатием клавиши проверяет.

да, но структура программы теряется... необходимо на каждой странице одно поле с проверкой. Вот пример

Просто в js я не очень силён, поэтому прошу помощи