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

【问题标题】：j-query form validation code makes page redirectedjquery表单验证代码使页面重定向
【发布时间】：2019-05-07 08:38:19
【问题描述】：

在 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;

});

一切正常，但我不希望页面被重定向。

【问题讨论】：

你想要重定向到另一个页面的代码吗？
@ArmanBagheri 我想验证用户是否尝试发送空表单，但我不希望页面被重定向。
@ArmanBagheri 如果我从上面删除验证代码，我不会被重定向，但我想检查表单是否为空。
写下完整的代码，这样我就可以看到你的表单@Alisha

标签： jquery jquery-validate

【解决方案1】：

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

像这样：

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

或者，试试这个：

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

    // do something
});

【讨论】：

【解决方案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 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/

【讨论】：