Скрипт проверки формы , перед отправкой

205
19 июля 2018, 16:00

скрипт, проверяет инпуты перед отправкой формы, и придает им класс error, подскажите как отредактировать чтобы этот класс добавлялся еще в блок .error-text

$("button.send").on("click", function(s) { 
  s.preventDefault(); 
  var e = $(this).closest("form"), 
    n = !0; 
  return $("form").find("input.required").removeClass("error"), e.find("input.required, textarea.required").each(function() { 
    return "" === $(this).val() ? ($(this).addClass("error"), $(this).focus(), n = !1, !1) : void 0 
  }), n && ($("form").find("input.required, textarea.required").parent().removeClass("error"), e.submit()), !1 
});
.main-input { 
  display: block; 
  margin-bottom: 5px; 
  &.error { 
    border-color: red; 
  } 
} 
 
.error-text { 
  opacity: 0; 
  visibility: hidden; 
  &.error { 
    opacity: 1; 
    visibility: visible; 
  } 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="c-ordering-form"> 
  <input class="main-input required" type="text" placeholder="ФИО" required="required" /> 
  <input class="main-input required" type="email" placeholder="E-mail" required="required" /> 
  <input class="main-input required" type="tel" placeholder="Телефон" required="required" /> 
  <button class="send">отправить</button> 
  <div class="error-text">Ошибка</div> 
</form>

Оригинал кода

Answer 1

		$('.send').on('click',function(e){ 
			e.preventDefault(); 
			var $inputArr = $('.c-ordering-form input'); 
			var inputLength = $inputArr.length; 
			var count = 0; 
			$.each($inputArr,function(i,v){ 
				if ($(v).val() == ''){ 
					$('.error-text, .c-ordering-form').addClass('error'); 
					$(v).addClass('error'); 
				} else { 
					count += 1 
					$(v).removeClass('error'); 
					count == inputLength ? $('.c-ordering-form , .error-text').removeClass('error') : ''			 
				} 
			}) 
		})
.main-input { 
		display: block; 
		margin-bottom: 5px; 
	} 
	.main-input.error { 
		border-color: red; 
	} 
 
	.error-text { 
		opacity: 0; 
		visibility: hidden; 
	} 
	.error { 
		opacity: 1; 
		visibility: visible; 
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form class="c-ordering-form"> 
  <input class="main-input required" type="text" placeholder="ФИО" required="required" /> 
  <input class="main-input required" type="email" placeholder="E-mail" required="required" /> 
  <input class="main-input required" type="tel" placeholder="Телефон" required="required" /> 
  <button class="send">отправить</button> 
  <div class="error-text">Ошибка</div> 
</form>

READ ALSO
Как исправить баг анимации у Isotope filter?

Как исправить баг анимации у Isotope filter?

Недавно начал пользоваться Isotope filter для фильтрации каталогаНо когда попытался добавить к нему transition c border и transform, при переключении фильтра...

194
Как сделать такую функцию vuejs?

Как сделать такую функцию vuejs?

На странице есть иконка, при наведение на нее, она исчезает и вместо нее появляется input:

187
value для select при загрузке

value для select при загрузке

есть селект со значениями от 1 до 10как мне сделать, что при загрузке страницы у меня в селекте сразу было выбрано значение семь?

193