Невозможно сохранить preventDefault при использовании submitHandler, сразу переходит к файлу AJAX PHP

Question

Я не могу сохранить свой AJAX звонок на той же странице. Он продолжает публиковать мою форму без каких-либо попыток preventDefault ().

Вот мой полный код для идентификатора формы «#leadform» и идентификатора кнопки «#submitButton».

$(document).ready(function() {

$("#submitButton").on('click', function(e) {
    e.preventDefault();
    $('#leadform').submit();
});

$("#leadform").validate({

    rules: {
        Mobile: {
            required: true
        },
        email: {
            required: true
        }
    },
    messages: {
        Mobile: {
            required: "Please enter a valid phone number"
        },
        email: {
            required: "Please enter your email address"
        }
    },
    submitHandler: function(form) {

         $("#response").addClass("alert alert-info").text("Do not close this window, it may take a minute to complete!");
        var formData = $('#leadform').serialize();
        $.ajax({
            url: 'submit.php',
            type: 'POST',
            data: formData,
            dataType: 'text', // json
            beforeSend: function(data) {
                //console.log(data);
            },
            success: function(data) {
                $("#response").removeClass("alert-info").delay(200).addClass("alert-success").text("Thank you for your request! You can now close this window");
            },
            error: function(data) {
                console.log('An error occurred.');
                console.log(data);
            }
        });
        return false;
    }

});
});

Я перепробовал множество вариантов, прочитал обо всех сообщениях SO, и ни один из них не помог.

Альтернативы, которые я пробовал:

• Без $ ('# leadform'). Submit ( ); вызывается отдельно, но из одной и той же функции.
• e.preventDefault из обработчика отправки (конечно, добавлен e в функцию).
• Пробовали с этой строкой и без нее return false.

Что бы я ни пробовал (буквально часами), он попадает прямо в файл php. Когда я удаляю функцию проверки и включаю ajax обычно с помощью функции нажатия кнопки отправки, она работает нормально и, как ожидалось (она просто не проверяет мой последний шаг в мастере формы, поэтому мне нужно выполнить проверку для этого последнего step.

Надеюсь, кто-нибудь может мне помочь.

Спасибо.

Добавлено HTML Раздел (сокращен)

<form action="submit.php" name="leadform" id="leadform" method="POST" accept-charset="utf-8" class="js-wizard-validation2-form">
   <div id="_Mobile" class="form-group">
      <label class="control-label" for="Mobile">Mobile Number</label>
      <input type="text" name="Mobile" id="Mobile" minlength="10" maxlength="16" placeholder="Phone number here" class="form-control required input_text" required="">
   </div>
   <div id="_Email" class="form-group">
      <label class="control-label" for="Email">Email Address</label>
      <input type="email" name="Email" id="Email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" placeholder="Email here" autocorrect="off" autocapitalize="off" class="form-control input_text" required="">
   </div>
   <div class="block-content block-content-sm block-content-full bg-body-light rounded-bottom" style="margin-top:20px;">
      <div class="row">
         <div class="col-6">
            <button type="button" class="btn btn-lg btn-alt-secondary" data-wizard="prev">
            <i class="fa fa-angle-left mr-1"></i> Previous
            </button>
         </div>
         <div class="col-6 text-right">
            <button type="button" class="btn btn-lg btn-info" data-wizard="next">
            Next<i class="fa fa-angle-right ml-1"></i>
            </button>
            <button type="submit" id="submitButton" class="btn btn-lg btn-success d-none" data-wizard="finish">
            <i class="fa fa-check mr-1"></i> Submit </button>
         </div>
      </div>
   </div>
</form>

Answer 1

Согласно docs , вы можете активировать валидатор, не отправляя форму.

var validator = $( "#leadform" ).validate();//your entire validation script goes here, its left out for brevity

$("#submitButton").on('click', function(e) {
    e.preventDefault();
    validator.form();
});