Как сделать так, чтобы не обновлялась страница при отправки формы с помощью ajax?

Question

[Сергей Соболь]

Здравствуйте, написал всё, так, чтобы не обновлялась страница, а закрывался один popup и после отправки открывался другой. Но меня почему-то перекидывает на пустой файл mail.php. Подскажите, что я неправильно написал?

HTML

<section class="modal">
        <div class="container">
                <div id="modal__wrapper">
                    <div class="modal__overlay" id="modal__overlay"></div>
                        <div class="modal__window">
                            <a href="#" class="modal__close" id="modal__close"></a>
                            <div class="modal__content">
                                <h3 class="modal__title">
                                    Заказать обратный звонок
                                </h3>
                                <form method="post" action="mail.php" class="modal__form" id="modal__form">
                                    <input type="text" name="firstName" class="modal__item" required placeholder="Имя">
                                    <input type="email" name="mail" class="modal__item"  placeholder="E-mail">
                                    <input type="tel" name="phoneNumber" class="modal__item" required placeholder="Телефон">
                                    <button class="modal__btn" id="modal__btn" data-submit>
                                            Заказать звонок
                                    </button>
                                </form>
                            </div>
                </div>
            </div>
            <div class="modal__successful" id="modal__successful">
                <div class="modal__overlay" id="modal__overlay-ty"></div>
                <div class="modal__successful-window">
                    <h3 class="modal__successful-title">
                        Отлично! Мы скоро вам перезвоним.
                    </h3>
                    <a href="#" class="modal__btn_two ghost__btn" id="modal__close-ty">Закрыть</a>
                </div>
            </div>
        </div>
    </section>

JS

//Валидация и отправка формы

    $('[data-submit]').on('click', function (e) {
        e.preventDefault();
        $(this).parent('form').submit();
    })
    $.validator.addMethod(
        "regex",
        function (value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
    );

        // Функция валидации и вывода сообщений
        function valEl(el) {
            el.validate({
                rules: {
                    phoneNumber: {
                        required: true,
                        regex: '^([\+]+)*[0-9\x20\x28\x29\-]{5,20}$'
                    },
                    firstName: {
                        required: true
                    },
                    eMail: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    phoneNumber: {
                        required: 'Поле обязательно для заполнения',
                        regex: 'Телефон может содержать символы + - ()'
                    },
                    firstName: {
                        required: 'Поле обязательно для заполнения',
                    },
                    eMail: {
                        required: 'Поле обязательно для заполнения',
                        email: 'Неверный формат E-mail'
                    }
                },
                // Начинаем проверку id="" формы
            submitHandler: function (form) {
                var $form = $(form);
                var $formId = $(form).attr('id');
                switch ($formId) {
                    case 'modal__form':
                        $.ajax({
                            type: 'POST',
                            url: $form.attr('action'),
                            data: $form.serialize()
                        })
                            .done(function () {
                                console.log('Success');
                            })
                            .fail(function () {
                                console.log('Fail');
                            })
                            .always(function () {
                                console.log('Always');
                                setTimeout(function() {
                                    $('#modal__successful').addClass('active');

                                }, 1100);
                                $('#modal__successful').on('click', function(e) {
                                    $('#modal__successful').removeClass('active');
                                    $('body').css('overflow', 'visible');
                                });
                                $('#modal__wrapper').removeClass('active');
                            });
                        break;
                }
                return false;
            }
        })
    };

Answer 1

[Павел Корнилов]

$('[data-submit]').on('submit', function (e) {
        e.preventDefault();
        // ... тут обрабатываем и валидируем
        this.form.submit();
    })