jquery 表单验证代码使页面重定向

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

只是阻止表单提交并改为调用您的自定义函数。

像这样：

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

或者，试试这个：

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

    // do something
});

Answer 2

您的代码：

$("#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() 方法仅采用 key:value 对表示规则和选项，它仅附加到表示 form 的选择器容器，而不是按钮。

默认情况下，jQuery 验证插件遵循默认表单操作，其中包括重定向。如果你想使用 ajax，那么你可以把它放在 the plugin's submitHandler 中。

"Replaces the default submit. The right place to submit a form via Ajax after it is validated."

绝对不需要编写单独的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" ....

演示：https://jsfiddle.net/ucekjzx4/1/

jquery 表单验证代码使页面重定向

j-query form validation code makes page redirected

jquery

jquery-validate