Исходные данные:
Сайт на 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 кнопки