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

Всем привет!

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

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

Валидация с помощью 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");
    });
  });