Как открыть Fancybox после отправки wpforms?

Question

[greedy_wizard]

У меня есть простая форма WPForms с двумя обязательными текстовыми полями, и мне нужно открыть Fancybox ТОЛЬКО после успешной отправки WPforms

function openFormResp() {
 new Fancybox([
    {
       src: '#modal-response',
       type: 'inline',
    },
 ])
}

document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function (e) {
          openFormResp()
    })
})

этот код не работает должным образом, потому что, когда поля не прошли проверку, открывается модальное окно! А открывать его следует только после валидации!

Comments

[Максим]

Попробуйте сделать функцию валидации полей формы

document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function (e) {
        e.preventDefault();
        // do validation
        if (!validate(form)) {
           return;
        }
         openFormResp();
    })
});

[Froggyweb]

document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function (e) {
          openFormResp()
    })
})

это убрать и найти часть где форма отправляется

Answer 1

[greedy_wizard]

//-----MODAL RESPONSE------------------------------------------
	function openFormResp() {
		new Fancybox([
			{
				src: '#modal-response',
				type: 'inline',
			},
		])
	}
//-----WPFORMS ACTION AFTER SUBMIT------------------------------------------
(($) => {
    $('form.wpforms-form').on('wpformsAjaxSubmitSuccess', (e) => {
        openFormResp()
    })
})(jQuery)