Верстаю сайт на резюме, как сделать, чтобы форма не перезагружала страницу (код внутри)?

Question

[Атланта]

На странице несколько форм, они валидируются плагином jQuery. И если валидация проходит успешно мне нужно, чтобы поля формы очистились и появилось сообщение о том, что мы вам перезвоним. Но у меня как только валидация проходят успешно обновляется страница.

<form class="form js-form" id="form-request" role="form">
    <input class="name" placeholder="Full name" type="text" name="name">
    <input class="email" placeholder="Email Address" type="email" name="email">
    <input class="phone" placeholder="Phone Number" type="tel" name="tel">
    <button type="submit" class="btn">request a quote</button>
</form>

Метод each используется потому, что у меня несколько форм валидируются.

$('.js-form').each(function () {
        $(this).validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
                name: {
                    required: true,
                    minlength: 2
                },
                tel: {
                    required: true,
                    digits: true,
                    rangelength: [5, 11]
                },
                submitHandler: function () {
                    alert('почему он не срабатывает? и как очистить поля)?');
                    closeModal();
                }
            }
        });
    });

Answer 1

[Атланта]

В общем ошибка была глупой. Я записала свойство submitHandler в rules.
Исправленный код)

$('.js-form').each(function () {
        $(this).validate({
            rules: {
                email: {
                    required: true,
                    email: true
                },
                name: {
                    required: true,
                    minlength: 2
                },
                tel: {
                    required: true,
                    digits: true,
                    rangelength: [5, 11]
                }
            },
  ----->     submitHandler: function () {
                alert('почему он не срабатывает? и как отчистить поля)?');
                closeModal();

            }
        })
    })

Answer 2

[Владимир]

Все дело в элементе button
Раз верстаете для резюме, почитайте внимательно https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

Comments

[Атланта]

Владимир, пожалуйста дайте мне немного более узкое направление, в котором следует двигаться. Что не так с button? На сколько мне известно в формах для submit используются button или input type="submit". Но последний вариант, как я слышала считается устаревшим.

[Владимир]

У button может быть тип не только submit, почитайте как работает каждый из них.

[Атланта]

Владимир, спасибо прочитаю.

[Владимир]

Ввел вас в заблуждение, для плагина validate как раз используется тип submit.
Похоже сам плагин не отрабатівает или не так отрабатівает.

[Атланта]

Владимир, ммм, нет, ничего нового я не узнала, тип: submit, reset, button. Мне нужно, чтобы срабатывала функция submitHandler, а она срабатывает на onsubmit, поэтому полагаю дело не в этом.

[Владимир]

Атланта, СМ выше
Как вариант, откройте плагин в дебагере и посмотрите на чем он ламается, ну и в консоль загляните, если до того не сделали.