Оцените мой скрипт валидации формы?

Question

[chernyavskiy94]

Доброй ночи, еще раз :)

Написал простенький скрипт валидации формы, пока без проверки правильности.
Пока только учусь, это мой первый написанный с нуля скрипт, буду рад критике и похвале :)
Вникать конечно не нужно, просто если не сложно указать на ошибки, которые сразу бросаются в глаза.
Буду очень Вам благодарен!
HTML:

<div class="wblock">
	<a href="#" class="openblock">Несколько модальных окон на странице</a>
	<div class="wblock">
		<div class="wform">
			<div class="title">Форма №1</div>
			<form action="#" method="post" id="form1">
				<input type="text" placeholder="Имя" class="check" name="name">
				<div class="error-message"></div>
				<input type="text" placeholder="Фамилия" class="check" name="surname">
				<div class="error-message"></div>
				<input type="text" placeholder="Отчество" class="check" name="otch">
				<div class="error-message"></div>
				<input type="text" placeholder="Телефон" class="check" name="phone">
				<div class="error-message"></div>
				<input type="text" placeholder="E-mail" class="check" name="email">
				<div class="error-message"></div>
				<input type="submit" value="Проверить" class="btn">
			</form>
		</div>
		<a href="#" class="openmodal" rel="form1">Форма №1</a>
	</div>
</div>

JS:

$(document).ready(function(){

	var checkInput = $(".check");
	var btn = $(".btn");
	var name = $("input[name='name']");
	var surname = $("input[name='surname']");
	var otch = $("input[name='otch']");
	var phone = $("input[name='phone']");
	var email = $("input[name='email']");
	var errorMessage = $(".error-message");
	
	btn.click(function(){
		$(".check").each(function(){
			if($(this).val() == ""){
				event.preventDefault();
				$(this).addClass("error");
				$(this).on("keyup",function(e){
					if($(this).val().length >= 2){
						$(this).removeClass('error');
					}
				});
			}
			else{
				
			}
		});
		
		//Проверка поля "Имя"

		if(name.val() == ""){
			name.next().text("Пожалуйста, укажите Ваше имя");
			name.on("keyup",function(e){
				if($(this).val().length >= 2){
					$(this).next(".error-message").remove();
				}
			});
		}
		
		//Проверка поля "Фамилия"

		if(surname.val() == ""){
			surname.next().text("Пожалуйста, укажите Вашу фамилию");
			surname.on("keyup",function(e){
				if($(this).val().length >= 2){
					$(this).next(".error-message").remove();
				}
			});
		}
		
		//Проверка поля "Отчество"

		if(otch.val() == ""){
			otch.next().text("Пожалуйста, укажите Ваше отчество");
			otch.on("keyup",function(e){
				if($(this).val().length >= 2){
					$(this).next(".error-message").remove();
				}
			});
		}
		
		//Проверка поля "Телефон"

		if(phone.val() == ""){
			phone.next().text("Пожалуйста, укажите Ваш телефон");
			phone.on("keyup",function(e){
				if($(this).val().length >= 2){
					$(this).next(".error-message").remove();
				}
			});
		}
		
		//Проверка поля "Email"

		if(email.val() == ""){
			email.next().text("Пожалуйста, укажите Ваш Email");
			email.on("keyup",function(e){
				if($(this).val().length >= 2){
					$(this).next(".error-message").remove();
				}
			});
		}
	});
});

Answer 1

[Александр Таратин]

Вместо keyup подписывайтесь на change или input.

Comments

[Александр Таратин]

event.preventDefault(); <--- вот это будет вызывать ошибку, так как event нигде не определенно

[chernyavskiy94]

А как его объявить?
И есть, что-то типа .change() но, чтоб проверяло не после потери фокуса, а во время ввода?

[Александр Таратин]

@chernyavskiy94 Чтобы корректно обрабатывать для ie от keyup избавиться не получится jsfiddle.net/QW01_01/8pcf017x/2

[Александр Таратин]

@chernyavskiy94 чистый keyup нельзя использовать, так как он не обработает вставку через контекстное меню.

[Евгений Петров]

Для IE8 следует использовать propertychange (с тонким управлением).
Для остальных input.

[Александр Таратин]

@Petroveg input не сработает на удаление в ie9-10 а propertychange в них уже не пашет или я ошибаюсь?

[Евгений Петров]

@Taraflex c IE9 propertychange не пашет, конечно. Насчёт input — есть такая штука. Вы правы.

[Евгений Петров]

@Taraflex вот так примерно решается вопрос (я делал объект для работы с полями).

var $Input = {
	...
	processingInput: function (options) {
		(options.context || $(document))
			.on('keyup', (options.selector || options.element), _keyup)
			.on('input', (options.selector || options.element), _input);

		function _keyup (e) {
			var item = e.target,
				$item = $(e.target);

			$item.data('timer', setTimeout(function () {
				if (item.value != $item.data('value')) {
					_manage(item);
				}
			}, 0));
		}

		function _input(e) {
			clearTimeout($(e.target).data('timer'));
			_manage(e.target);
		}

		function _manage(item) {
			$(item).data('value', item.value);
			options.callback(item);
		}
	}
}

И вызов:

$Input.processingInput({
	selector: ..., //Селектор или ссылка на элемент
	context: ..., // Ссылка на контекст
	callback: function (item) {
		... // Получили ссылку на элемент
	}
});

Answer 2

[xmoonlight]

Простите, если не в тему....

Answer 3

[Никита]

однажды вам надоест писать велосипеды каждый раз и вы посмотрите в торону готовых плагинов )
для данной задачи я бы использовал jqueryvalidation.org