Как сделать, чтобы окно с благодарностью не появлялось, если не прошла валидация?

Question

[Pavel_20]

Использую плагин jquery validate:

<form id="form" action="#">
     <input type="text" name="fio" class="promo__form-input" placeholder="ФИО*">
     <input type="tel" name="phone" class="promo__form-input" placeholder="[phone]">
     <input type="email" name="email" class="promo__form-input" placeholder="e-mail*">
     <label class="promo__form-agreement">
              <input class="check-box" type="checkbox" checked name="user-agreement">
              <span class="check-style"></span>
              Согласие на обработку <a href="#">персональных данных</a>*
      </label>
      <small class="promo__form-required">
            * Обязательные поля для заполнения
      </small>
      <button class="promo__form-btn" type="submit">
              Отправить
      </button>
</form>

function validateForms(form) {
    $(form).validate({
        rules: {
            fio: "required",
            phone: {
                required: true,
            },
            email: {
                required: true,
                email: true,
            }
        },
    });
}

validateForms('#form');

$('form').submit(function (e) {
    e.preventDefault();

    $.ajax({
        type: "POST",
        url: "",
        data: $(this).serialize(),
        success: function (data) {
            $(this).find("input").val("");
            $('.promo__form-input').removeClass('valid');
            $('form').trigger('reset');
            $('.overlay, .popup-thanks').fadeIn('slow');
        },
    });
    return false;
});

При нажатии на кнопку отправить с type="submit" выскакивает модалка, хотя при этом валидация подключена и работает...
Что я делаю не так?

Comments

[AUser0]

Так у вас же прямо в скрипте эта модалка и "активируется": $('.overlay, .popup-thanks').fadeIn('slow');

P.S. Аааа, что-бы не... Тогда возвращайте в случае ошибки какой-нибудь текст "ERR" - и сравнивайте if (data == "ERR") ... Либо возвращайте не-200 HTTP-код и пишите функцию error().

Answer 1

[Алексей Дубровин]

Варианты
1) Оберните ajax запрос в условие, которое будет выполняться только когда валидация пройдена.

У вас вызывается окно так как вы отправляете ответ с сервера.
2) Если на сервере валидация не прошла то отвечайте ошибкой.