Как предотвратить повторную отправку формы на событие отправки Jquery?

Question

У меня есть форма и событие отправки jquery с вызовом ajax. После того, как я нажму "отправить", эта форма будет отправлена ​​повторно. Я не хочу отключать кнопку, просто не хочу, чтобы она повторно отправляла форму. Попытка добавить «return false» после отправки события, но это не сработало

window.addEventListener("load", () => {
$(".bmlf-form").on("submit", event => {     

    event.preventDefault();
    const values = $(event.target).serializeArray();

    $.ajax({
        url: `apiURL`,
        type: 'Post',
        crossDomain: true,
        async: true,
        datatype: 'json',
        data: JSON.stringify(objectifyForm(values)),
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            alert("Thank you");
            $(".bmlf-form")[0].reset();

        },
        error: function () {
            alert("Please try again");
        }
    });
});
});

Answer 1

Я понял это. Моя форма имеет класс "was-validated" , который добавляется к элементу "form" после первоначального запроса на отправку. Поэтому после первого нажатия кнопки «Подтверждение» выполняется проверка, и этот класс добавляется в форму. Поскольку это ajax-вызов, страница не перезагружается, и этот класс все еще прикреплен к моей форме, которая снова вызывается и проверяет форму.

Решение - я должен был удалить этот класс из формы, если событие прошло успешно. Я использовал функцию jquery .removeClass () , и теперь все хорошо.

при начальной загрузке страницы

   <form class="bmlf-form needs-validation" method="POST" novalidate="">

После первоначального нажатия кнопки подтверждения

<form class="bmlf-form needs-validation was-validated" method="POST" novalidate="">

jQuery Удалить код класса

  //some jQuery Code here
 success: function (data) {
            $(".bmlf-form").removeClass('was-validated');
            $(".bmlf-form")[0].reset();
            alert("Thank you");
        }