как создать условие на проверку jquery validate?

Я совсем новичок в javascript. Проблема вот в чём. Я распишу всё подробно и по порядку. Я создал форму в html странице, застилизовал и тд и дальше воспользовался валидатором, для того, чтобы когда вводятся данные он их фильтровал и говорил ошибки (например если неправильно указан email), для этого использовал плагин jQuery Validation, на всякий случай и код приложу:

$(document).ready(function(){ 
 function validateForms(form) {
          $(form).validate({
              rules: {
                  name: "required",
                  phone: "required",
                  email: {
                      required: true,
                      email: true
                  }
              },
              messages: {
                  name: "Пожалуйста, введите своё имя",
                  phone: "Полажуйста, введите ваш телефон",
                  email: {
                      required: "Пожалуйста, введите свой email",
                      email: "ваш email должен быть в формате: [email protected]"
                  }
              }
          });
      }

      validateForms('#first_form');
      validateForms('#consultation form');
      validateForms('#order form');

Валидатор работает отлично, там текст свой подставил, немного со стилями поработал и даже адаптировал, всё работает хорошо.

Далее я хотел реализовать отправку писем. Для этого использовал плагин mailer, который вроде работает на php. В js же после этого прописан следующий код:

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


            $('form').trigger('reset');
        });
        return false;
    });


});

сам mailer я тоже настроил и отправка писем работает. Т.е я заполняю данные (имя, email, телефон) и они приходят на указанную почту с указанной почты.

НО проблема вот в чём. Как вы могли заметить, код указан друг за другом, а из этого получается, что у меня срабатывает валидатор, но не обращая на него внимание работает и следующий код, отвечающий за отправку писем! Например если я не правильно ввёл email, валидатор сообщает мне об этом там сообщение в красной рамочке выдаёт но всё равно это отправляется на email.

порывшись в документации (ссылка: https://jqueryvalidation.org/valid/) я нашёл, что в jquery validate есть метода .valid, и с помощью документации добавил перед функцией валидации (см припер 1) я написал код:

jQuery.validator.setDefaults({
        debug: true,
        success: "valid"
});

и попробовал сделать вместо моего кода с отправкой (см пример 2) условие:

$('form').submit(function(e) {
        if ($(form).valid() === true) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "mailer/smart.php",
                data: $(this).serialize()
            }).done(function() {
                $(this).find("input").val("");
                $('#consultation, #order').fadeOut();
                $('.overlay, #thanks').fadeIn('fast');


                $('form').trigger('reset');
        });
        return false;
        }
    });

В общем так у меня вообще письмо не отправляется, ни пустое, ни заполненное.

Можете указать, где у меня ошибка и почему не работает мой код? И как можно решить данную проблему?

Вот форма, она простая и все 3 раза одинаковая:

<form id="first_form" class="feed-form" action="#">
    <input name="name" required placeholder="Ваше имя " type="text">
    <input name="phone" required placeholder="Ваш телефон ">
    <input name="email" required placeholder="Ваш E-mail " type="email">

    <button class="button button_form">заказать КОНСУЛЬТАЦИЮ</button>
</form>


Ответы (0 шт):