Правильная валидация формы?

Question

[Артур Карапетян]

Тостеровчане, простите за мою недальновидность, но к концу рабочего дня мой мозг не желает выдавать адекватные рабочие идеи. задача элементарная:
Мне нужно проверить на заполненность поля с классом required. И если поле пустое необходимо:

1. Добавить полю класс error
   
2. Добавить .error-checker класс visible
   

А если заполнено, тогда удалить эти классы

Вот что я написал:

html

<form class="form callback-form">

	<div class="success"><span>Спасибо за Заявку!</span></div>

	<div class="callback-form-head">
		<h4>Запись на Прием</h4>
		<p>Оставьте заявку и мы свяжемся с Вами в течении 30 минут!</p>
	</div>

	<div class="callback-form-body">
		
		<input type="text" name="Стилист" class="hidden" id="formStylistName" value="Не указан">

		<label>
			<div class="input-label">
				<span>Ваше имя:</span>
				<span class="error-checker"><i class="fa fa-times-circle"></i> Заполните это поле</span>
			</div>
			<input class="required" type="text" name="Имя" placeholder="Ваше имя...">
		</label>
		<label>
			<div class="input-label">
				<span>Ваш телефон:</span>
				<span class="error-checker"><i class="fa fa-times-circle"></i> Заполните это поле</span>
			</div>
			<input class="phone-input required" type="text" name="Телефон" placeholder="Ваш телефон...">
		</label>
	</div>

	<button class="btn appointment-btn-small"><i class="fa fa-check"></i>Отправить Заявку</button>

</form>

$(".form").submit(function(e) {
		e.preventDefault();

		var th = $(this);
		var reqInputs = th.find(".required");

		reqInputs.each(function(index) {
			var errorChecker = $(this).parent().find(".error-checker");
			var errors = 0;
			if($(this).val() == "" || $(this).val() == " ") {
				$(this).addClass("error")
				errorChecker.addClass("visible");
                                errors++;
			} else {
				$(this).removeClass("error")
				errorChecker.removeClass("visible");
		                errors--;		
			}
			if(errors == 0) {
				$.ajax({
					type: "POST",
					url: "assets/app/modx-mail.php", //Change path/to/mail.php
					data: th.serialize()
				}).done(function() {
					th.find(".success").addClass("active");
					setTimeout(function() {
						// Done Functions
						th.find(".success").removeClass("active");
						th.trigger("reset");
						$.magnificPopup.close();
					}, 3000);
				});
			}
		})

	});

Но форма не отправляется если не заполнены оба поля.

Вопрос: Что не так с моим кодом

Comments

[Anton Mashletov]

if($(this).val() == "" || $(this).val() == " ")

— так себе валидация! Где проверка на 2 пробела? Ненадёжно.

Answer 1

[Александр]

th.find('input[type="text"], textarea').each( function(){
		var req = $(this).hasClass('required');
		if( (req == true) && ($(this).val() == '')){
			$(this).addClass('error');
			$(this).focus(function(){
				$(this).removeClass('error');
			});
			error = true;
		}
	});

Так?