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

Question

[f1cus]

Есть валидация формы через плагин jquery validation

<div class="overlay">
        <div class="overlay_modal" id="consultation">
            <div class="modal_close">&times;</div>
            <div class="modal_subtitle">Просто заполните форму заявки</div>
            <div class="modal_descr">и мы перезвоним вам в течении 10 минут</div>
            <form class="overlay_form">
                           
                <input name="number" class="form-control" placeholder="Ваш номер">
                <input name="name" type="text" class="form-control" placeholder="Ваше имя">
                <button type="submit" class="btn btn-primary">Заказать звонок</button>
            </form>
        </div>

        <div class="modal_mini" id="thanks">
            <div class="modal_close">&times;</div>
            <div class="modal_subtitle">Спасибо за вашу заявку!</div>
            <div class="modal_descr">Наш менеджер свяжется с вами 
                в ближайшее время!</div>
        </div>
    </div>

function validateForms(form){
        $(form).validate({
            rules: {
                name: {
                    required: true,
                    minlength: 2
                },
                number: "required"
            },
            messages: {
                name: {
                    required: "Пожалуйста, введите свое имя",
                    minlength: jQuery.validator.format("Введите {0} символа!")
                  },
                number: "Пожалуйста, введите свой номер телефона"
            },
        });
    };
validateForms('#consultation form');

Также есть функция, которое после нажатия на кнопку опртвляет post запрос и выводит блок modal_mini. Для вопроса интересует часть, где выводится блок ( .done(function() )

$('form').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "mailer/smart.php",
            data: $(this).serialize()
        }).done(function() {
                $(this).find("input").val("");
                $('#consultation').fadeOut();
                $('.overlay, #thanks').fadeIn('slow');
                $("form").trigger("reset");
        });
        return false;
    });

Правил валидации для modal_mini нет, поэтому если нажать на кнопку, то появляются требования ввести данные, после этого окно об успешном выполнении (которое должно появляться после заполнения формы и нажатия на кнопку).

Попробовал добавить условие для modal_mini, но оно почему-то не срабатывает

function validateForms(form){
    //  $(form).validate({ 
   // ...
   // });
    if ($('form').valid(false)) { 
        $('#thanks').fadeOut('fast');
    }
}

Помогите сделать правило для modal_mini, чтобы блок не появлялся

Answer 1

[f1cus]

$("form").each(function () {
        $(this).validate({
          rules: {
            name: {
              required: true,
              minlength: 2
            },
            number: "required",
          },
          messages: {
            name: {
              required: "Пожалуйста, введите свое имя",
              minlength: jQuery.validator.format("Введите {0} символа!")
            },
            number: "Пожалуйста, введите свой телефон",
          },
          submitHandler: function (form) {
            $.ajax({
              type: "POST",
              url: $(form).attr('action'),
              data: $(form).serialize()
            }).done(function () {
              $(form).find("input").val("");
              $('#consultation').fadeOut();
              $('.overlay, #thanks').fadeIn('slow');
              $(form).trigger('reset');
            });
            return false;
          }
        });
    });

Comments

[f1cus]

почитал документацию, помог submitHandler