Как сделать валидацию перед переходом в следующее модальное окно?

Question

[Сергей]

Всем привет!

Есть две модалки с формами. Заполнив форму одной, при клике на кнопку должна происходить валидация полей, а потом только переход к другой модалке. Валидация в моем случае не проходит, сразу в другой кидает. Хотя по отдельности, если отключить переход, то поля проверяются...

Как выполнить валидацию перед переходом?

Валидация с помощью jquery Validate

Код валидации

const form = $("#form");

    form.validate({
      rules: {
        name: "required",
        email: {
          required: true,
          email: true
        },
        textarea: "required",
        company: "required"
      },
      messages: {
        name: "Неверный формат данных",
        email: {
          required: "Неверный формат данных",
          email: "Неверный формат данных"
        },
        textarea: "Неверный формат данных",
        company: "Неверный формат данных"
      }
    });

Код открытия/закрытия попапа

const popupOpenButtons = document.querySelectorAll('.j-popup-open');
const popupCloseButtons = document.querySelectorAll('.j-popup-close');
const innerPopupCloseButtons = document.querySelectorAll('.j-inner-popup-close');

  popupOpenButtons.forEach(function(item) {
    item.addEventListener('click', function(e) {
      e.preventDefault();

      const popupId = this.getAttribute('data-popup');
      const popupWindow = document.querySelector(`.popup[id='${popupId}']`);

      popupWindow.style.display = 'block';
      document.body.classList.add('scroll-hidden');
    });
  });

  popupCloseButtons.forEach(function(item) {
    item.addEventListener("click", function(e) {
      e.preventDefault();

      const popupId = this.getAttribute("data-popup");
      const popupWindow = document.querySelector(`.popup[id="${popupId}"]`);

      popupWindow.style.display = "none";
      document.body.classList.remove("scroll-hidden");
    });
  });

Answer 1

[Kudis]

Смею предположить что Ваши popupOpenButtons и должны сабмитить форму?
Но в текущей реализации они просто показывают popupWindow!
Убирайте Ваши popupOpenButtons.forEach...,
атрибут 'data-popup' перемещайте в форму
и дополняйте валидацию submitHandler-ом

form.validate({
      rules: {
        ...
      },
      messages: {
        ...
      },
      submitHandler: function() {
        const popupId = this.currentForm.getAttribute('data-popup');
        const popupWindow = document.querySelector(`.popup[id='${popupId}']`);

        popupWindow.style.display = 'block';
        document.body.classList.add('scroll-hidden');
      }
});

Как-то так!