Как вызвать принудительно обработчик validate для Contact Form 7

Исходные данные:

Сайт на WordPress с использование плагина «Contact Form 7«. К форме плагина добавляется кнопка «Расчет«, по событию onClick которой делается расчет данных, но перед расчетом нужно проверить элементы формы (input) на заполненность.
А уже после использовать кнопку (input type=»submit») для отправка сообщения.

Суть задачи:

По нажатию на кнопку «Расчет» (событие onClick), запустить валидацию от «Contact Form 7» по проверке полей.

Поиски решения — не работающие

// не работает
//--- вариант 1
$('.calc-cf7-form .wpcf7-form.init').change();
//--- вариант 2
$('.calc-cf7-form .wpcf7-form.init').trigger('change');
//--- вариант 3
$('.cf7-form .wpcf7-form.init input[name="your-name"]').change().trigger('refresh');
//--- вариант 4
var form = document.querySelector('.cf7-form .wpcf7-form.init');

if (form) {
  // Создаем событие change
  var event = new Event('change', { bubbles: true });
  // Вызываем событие на форме
  form.dispatchEvent(event);
}

Рабочий пример


// Выбираем элемент формы
const formElement = document.querySelector('.cf7-form .wpcf7-form.init');

// Вызываем внутреннюю функцию валидации CF7
if (window.wpcf7 && typeof wpcf7.validate === 'function') {
  wpcf7.validate(formElement);
}

Данный кусок вставляется внутрь события onClick кнопки

Оцените статью
Добавить комментарий