Код проверки формы j-запроса делает страницу перенаправленной

Question

Написание кода проверки в jquery работает, но если пользователь заполняет все детали и отправляет, то страница перенаправляется.

Ниже приведен мой код в форме:

<form action="/process.php" method="post" id="address">
<div class="subscription text-left mb-4" style="color:#1E695E">
<p class="text-left mb-0"><strong>नाम</strong></p>
<input type="text" id="defaultRegisterFormFirstName" class="form-control" placeholder="नाम"
                        name="full_name" required value="">
</div>
    <div class="subscription text-left mb-4" style="color:#1E695E">
    <p class="text-left mb-0"><strong>सम्पर्क नम्बर</strong></p>
<input type="text" id="defaultRegisterFormFirstName" class="form-control" placeholder="सम्पर्क नम्बर "
                        name="contact" required value="">
</div>
<div class="row mb-4" style="color:#1E695E">
                <div class="col">
                    <p class="text-left mb-0"><strong>सडक ठेगाना</strong></
                    <!-- First name -->
                    <textarea style="resize: none;" id="defaultRegisterFormFirstName" class="form-control" placeholder="ठेगाना "
                        name="address" rows="3" required></textarea>
                </div>
            </div>

<button id="confirm" class="btn btn-articles">ठेगाना पुष्टि गर्नुहोस्</button>
</form>

Я пытался представить submitHandler следующим образом:

$("#confirm").validate({
 if(! $form.valid()) return false;
submitHandler: function(form) {
   var data = $('#address :input').serializeArray();

    $.post($('#address').attr('action'), data, function(info){ 
    $('#result').html(info); });
}
});

$('#address').submit(function(){

    return false;

});

Все работает нормально, но я не хочу, чтобы страница перенаправлялась.

Answer 1

Ваш код:

$("#confirm").validate({
    if(! $form.valid()) return false;
    submitHandler: function(form) {
        var data = $('#address :input').serializeArray();
        $.post($('#address').attr('action'), data, function(info) { 
            $('#result').html(info); 
        });
    }
});

$('#address').submit(function(){
    return false;
});

Вы не можете просто поставить условный оператор сам по себе в методе .validate(), не сломав плагин.

$("#confirm").validate({
    if(! $form.valid()) return false;  // REMOVE THIS LINE
    ...

Метод .validate() only принимает key:value пары, представляющие правила и опции, и он присоединяется только к селектору, представляющему контейнер form, а НЕ к кнопке.

По умолчанию плагин jQuery Validate следует за действием формы по умолчанию, которое будет включать перенаправление.Если вы хотите использовать ajax, вы должны поместить это в плагина submitHandler.

"Заменяет отправку по умолчанию. Правильное место для отправки формы через Ajax после ее проверки."

Абсолютно нет необходимости для написания отдельной функции обработчика submit.

$("#confirm").validate({
    submitHandler: function(form) {
        var data = $('#address :input').serializeArray();
        $.post($('#address').attr('action'), data, function(info) { 
            $('#result').html(info); 
        });
        return false;
    }
});

---

Селектор, который вы подключаете к .validate() , должен соответствоватьform, НЕ кнопка.Поскольку тег form содержит id="address" ...

$("#address").validate({ ....

---

И, наконец, ваш button также должен быть type="submit" ...

<button id="confirm" type="submit" ....

---

DEMO: https://jsfiddle.net/ucekjzx4/1/

Answer 2

Просто запретите отправку формы и вместо этого вызовите пользовательскую функцию.

Как это:

<form action="/process.php" method="post" id="address" onSubmit="return false; validate();">
    [...]
</form>

альтернативно, попробуйте это:

$('#address').submit(function(event){
    event.preventDefault();

    // do something
});