Как при сабмите формы на AJAX обращаться к ее дочерним элементам через jQuery?

Question

[Владислав Бойченко]

Здравствуйте!
Через собственоручно написанный костыль хочу изменять цвет бордера у инпута, если он не заполнен. То есть при сабмите отлавливаю клик, и делаю проверку: если поле не заполнено, поменять цвет бордера. Но суть в том, что формы две -- одна всплывающая, и одна на странице. Я написал код так, как думаю, что оно должно было бы менять цвет бордера именно тем инпутам, которая сабмитится, но оно меняет цвет только первой по коду форме (та, что на странице, а та, что скрытая, идет после футера). Если же поле заполнено, срабатывает AJAX и происходит отправка. Но можно ли как-то менять цвет границ именно той формы, в которой нажато "Submit"?
Спасибо!

$(".form").submit(function(e) {
		if ($(this).find("input[name='clientName']").val() == '') {
			$("input[name='clientName']").css('border-color', '#cc7671');
			e.preventDefault();
		} else if ($(this).find("input[name='clientPhone']").val() == '') {
			$("input[name='clientPhone']").css('border-color', '#cc7671');
			e.preventDefault();
		} else if ($(this).find("input[name='clientEmail']").val() == '') {
			$("input[name='clientEmail']").css('border-color', '#cc7671');
			e.preventDefault();
		} else {
			$.ajax({
				type: "POST",
				url: "mail.php",
				data: $(this).serialize()
			}).done(function() {
				$(this).find("input").val("");
				alert("Спасибо за заявку! Скоро мы с вами свяжемся.");
				$(".form").trigger("reset");ъ
			});
			return false;
		}
	});

Answer 1

[Алексей Скляров]

Проверку на пустоту инпутов и добавления бордера рекомендую вам обдумать и переписать, что касается формы, правильнее делать так:
Пишите функцию, например

function sendForm(form) {
      // тут что-то происходит
  }

На сами формы вещаем обработчик (в качестве параметра функции передаем сам объект формы (помечен как this))

<form class="" action="" method="post" onsubmit="sendForm(this);return false;">
       </form>

В самой функции используем примерно следующее:

function sendForm(form) {
   $(form).find('.input-error').fadeOut();       
  }

Таким образом блок .input-error будет прятаться только в той форме, с которой работает пользователь.

P.S чтобы было проще ориентироваться в своем коде, просто напишите отдельно функцию валидации и проверяйте ее, после чего отправляйте форму (в valid записываем результат выполнения функции):

function sendForm(form) {
      var valid = formValidation(form);
      if (valid) {
        $(form).find('.input-error').fadeOut();
        jQuery.ajax({
          url: "/mail/mail.php",
          data:$(form).serialize(),
          type: "POST",
          success:function(data){
            $('#orderModal').modal('hide');
            $('#successModal').modal('show');
            $(form).find('input[type="text"]').val('');
          },
          error:function (data){
            $(form).find('.form-error').html('Произошла какая-то ошибка. Попробуйте еще раз.').fadeIn();
          }
        });
      }
  }

Саму функцию formValidation(form) можно написать какую угодно. Если поле пусто, оно должно возвращать false, если вся проверка прошла успешно - то true. Работает так же для конкретно той формы, что вызывается.