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()方法仅接受代表规则和选项的key:value对，并且仅附加到代表form容器的选择器上，而不附加到按钮上

默认情况下，jQuery Validate插件遵循默认的表单操作，其中包括重定向。如果要使用ajax，则可以将其放在the plugin's 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" ....

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

Answer 2

仅阻止表单提交，而是调用您的自定义函数。

赞：

@PlanningSolution

或者，尝试以下操作：

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

j-query表单验证代码使页面重定向

2 个答案: