как создавать сложные условия на jquery?

Question

Я совсем новичок в 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.

Я пытался создать условие, при котором если срабатывает валидатор, не отправляется письмо. Я пытался сделать это с помощью label с классом .error, который возникает как раз таки в результате работы валидатора

вот код который я пытался применить и который естественно не работал:

$('form')(function() {
        if ($(this).find(".error")) {

        } else {
            $('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;
            });
        }
    });

Помогите пожалуйста советом, как реализовать мою задумку правильно (чтобы сначала проработал валидатор, а после шла отправка), почему не работает мой код и любую критику по этому поводу. И простите пожалуйста за моё сочинение )

ДОПОЛНЕНИЕ. Попробовал добавить следующий код перед $(form).validate :

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

далее не понял что надо сделать, пробовал прописывать что-то типо таких условий:

$('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;
        } else {
            
        }
    });

(вместо моего примера, который идёт вторым) так и не разобрался как решить проблему((

Answer 1

может быть так?

if ($(this).find(".error").length) {

Answer 2

У вас отправка формы идет без проверки на валидность, сразу отправляется ajax-запрос (см. ваш 2-ой пример кода).

Добавьте туда проверку с помощью метода .valid.

Пример и описание в документации: https://jqueryvalidation.org/valid/

Answer 3

Для демонстрации скрыл отправку формы.
Раскомментируйте строки и всё будет работать.

    $(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]"
                    }
                }
            });
        }
        jQuery.validator.setDefaults({
            debug: true,
            success: "valid"
        });

        validateForms('#first_form');
        $('form').submit(function (e) {
            if ($('#first_form').valid() === true) {
                console.log('Форма прошла валидацию, отправляем письмо.');
/*                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;*/
            }
        });
    });

<script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<form id="first_form">
    <input name="name">
    <input name="phone">
    <input name="email">
    <button type="submit">Клик</button>
</form>

БЛОГ НА HUSL

как создавать сложные условия на jquery?

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