Contact Form 7 — Как передать класс валидации родительскому элементу?

Question

[Alex F]

Здравствуйте!

По умолчанию класс задается общий для формы ( '.invalid' ) и каждому элементу input ( '.wpcf7-not-valid' ).
Задача: если поле не проходит валидацию - к родительскому span добавить класс ( '.not-valid' ) и если проходит то убрать.
Буду благодарен за любые подсказки или решение.

<span class="wpcf7-form-control-wrap name tyt_class">
<input type="text" name="name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="name">
</span>

Comments

[on_click]

самое простое, открыть js cf7, найти место где добавляется invalid к элементу и ниже добавить его к ближайшему спану. но это так, дурацкое решение) при обновлении он перезапишет js файл.

[Alex F]

Пробовал. Класс добавляется но не удаляется - остается до перезагрузки страницы.

[Модератор]

Alex, дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае, ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Денис Янчевский]

Здравствуйте.

(function ($) {
	$(document).ready(function () {
		document.addEventListener('wpcf7invalid', function (event) {
			$('.wpcf7-form-control').each(function () {
				var $this = $(this);
				var $parent = $this.parent();
				if ($this.hasClass('wpcf7-not-valid')) {
					$parent.addClass('not-valid');
				} else {
					$parent.removeClass('not-valid');
				}
			});
		}, false);
	});
})(jQuery);

Comments

[Alex F]

Денис, большое спасибо!
У меня аналогичное решение не заработало похоже из-за отсутствия "обертки".