Как минимизировать скрипт jQuery?

Question

[Magic6200]

Подскажите пожалуйста, как переписать код так, чтобы происходила одновременная проверка всех полей, а не по одному.
Здесь пример кода: https://codepen.io/Dragon1590/pen/QOPKzq
А здесь попытки минимизации: https://codepen.io/Dragon1590/pen/XzQNgL

Answer 1

[Виталий Мудрый]

$(function(){
		$("form").submit(function(event){
			event.preventDefault(); //запретить отправку данных
      
      var validName = true;
		  var validEmail = true;

			var name = $("#name").val();
			var email = $("#email").val();

      //проверка поля name
      if (name) {
        $("#name").parent().removeClass("has-error").addClass("has-success");	
      } else {
				$("#name").parent().removeClass("has-success").addClass("has-error");	
				validName = false;
			}

      //проверка поля email
			if(email) {
        $("#email").parent().removeClass("has-error").addClass("has-success");
			} else {
				$("#email").parent().removeClass("has-success").addClass("has-error");	
				validEmail = false;	
			}

      // если все поля заполнены - форма отправляется
     validName && validEmail && $('form').unbind('submit').submit();  //разрешить отправку данных
		});
  });

Comments

[Magic6200]

Я имел ввиду, путем перебора элементов формы, т.к. каждый раз пишутся одинаковые методы.

Answer 2

[KazeZlat]

Ну вот так, к примеру:

$(document).ready(function(){
	$("form").submit(function(event){
		var $parent = $("#name, #email").parent().removeClass("has-success has-error");
		//проверка поля name
		$("#name").parent().addClass($("#name").val() ? "has-success" : "has-error");	
		//проверка поля email
		$("#email").parent().addClass($("#email").val() ? "has-success" : "has-error");	
		// запрещаем отправлять, если есть хоть одна ошибка
		if($parent.hasClass("has-error")) {
			event.preventDefault();
		}
	});
});

А если циклом, то вот так можно (все внутри замыкания можно и в одну строку написать, но так нечитабельно будет):

$(document).ready(function(){
	$("form").submit(function(event){
		$("#name, #email").each(function(){
			$(this).parent()
				.removeClass("has-success has-error")
				.addClass($(this).val() ? "has-success" : "has-error")
				.hasClass("has-error") 
				&& event.preventDefault();
		});
	});
});

Comments

[Kovalsky]

Вероятно, лучше будет использовать input[id] вместо перечисления идентификаторов.

[KazeZlat]

Никита Полевой, вообще ID не нужно в таком случае, достаточно будет просто $('input', this)