JQuery验证失败后页面仍然回发答案

【问题标题】：Page still Postbacks after JQuery validation failJQuery验证失败后页面仍然回发
【发布时间】：2015-07-05 14:23:02
【问题描述】：

我有一个应用了 JQuery 验证的 ASP.Net Web 表单页面。问题是，当验证失败时，页面仍然回发。我有两个具有required : true 验证的文本框。这是我的提交按钮代码：

<button id="btnSubmit" class="btn btn-info" type="button" onserverclick="btnSubmit_Click" onclick="checkValidate(event);" causesvalidation="true" 
runat="server"> 
<i class="icon-ok bigger-110"></i>Submit 
</button>

这是 JQuery 的验证方法：

$(function() { 
            $('#validationForm').validate({ 

             errorElement:'span',
             errorClass: 'help-inline', 
             focusInvalid: false, 
                      //debugger;
             rules: { 
             <%=txtName.UniqueID %>: { 
             required: true 
            }, 
        <%=txtDescription.UniqueID %>: { 
        required: true 
        } 
      }, 

        messages: { 
        <%=txtName.UniqueID %>: { 
        required: "Please provide a valid name." 
        }, 
        <%=txtDescription.UniqueID %>: { 
        required: "Please specify a description."
        }, 
      }, 
        invalidHandler: function (event, validator) { //display error alert on form submit   
                        $('.alert-error', $('.login-form')).show();
                    },

                    highlight: function (e) {
                        $(e).closest('.control-group').removeClass('info').addClass('error');
                    },

                    success: function (e) {
                        $(e).closest('.control-group').removeClass('error').addClass('info');
                        $(e).remove();
                    },

                    submitHandler: function (form) {
                    },
                    invalidHandler: function (form) {
                    }
                });
                })

这是检查按钮点击验证的方法：

function checkValidate(evt) { 
// Validate the form and retain the result. // 
var isValid = $('#validationForm').valid(); 
// // If the form didn't validate, prevent the form submission. //
//debugger; 
if (!isValid){ 
evt.preventDefault(); 
evt.stopPropagation(); 
return false; }
else 
return true; 
}

这是我的按钮呈现的 HTML：

<button onclick="checkValidate(event); __doPostBack('ctl00$ContentPlaceHolder1$btnSubmit','')" id="ContentPlaceHolder1_btnSubmit" class="btn btn-info" type="button"> 
<i class="icon-ok bigger-110"></i>Submit 
</button>

另外，我将调试器放在 checkValidate() 方法中，发现那里一切正常，但在方法结束后，页面回发。我在浏览器的控制台上运行了 JQuery valid() 方法，它也运行良好，返回了正确的值。
当文本框为空时：填充文本框时：

问题到底出在哪里？验证失败时如何停止页面回发？

【问题讨论】：

默认阻止点击按钮提交，如果验证成功则使用 submit() 函数
我的按钮类型是type="button" 而不是type="submit"。此外，当验证返回 false 时，我还写了 evt.preventDefault(); evt.stopPropagation(); 。这应该让按钮停止提交，但事实并非如此：/ @madalinivascu
您还没有显示表单的来源，尽管这个问题可能会帮助stackoverflow.com/q/3591634/1741542

标签： javascript c# jquery asp.net validation

【解决方案1】：

使用

onclick="return checkValidate(event);"

【讨论】：

我已经这样做了，但现在页面根本没有提交..即使验证返回 true。 ://

【解决方案2】：

你可以这样做：

onclick="if (checkValidate(event)) {YOURMETHODTOEXECUTE_ON_SUCCESS()}"

显然，您需要稍微重构代码，但它应该以这种方式工作。

根据评论，在这种情况下，您可以使用：

onclick="return !!yourFunction()"

无需更改您的 onserverclick=""

【讨论】：

我想在成功时执行的方法是服务器端的ButtonClick方法，我已经提到过onserverclick="btnSubmit_Click"所以我不能写在客户端的点击事件上
onclick="return !!yourFunction()" yourFunction 是什么？ JQuery 验证功能还是我的服务器端功能？ @克里斯
对不起，这应该是你的验证功能

【解决方案3】：

我终于做到了。我刚刚在我的表单上添加了 onsubmit 属性并在其中设置了 jquery 有效方法。
这是我之前的表单代码

<form class="form-horizontal" id="validationForm" method="post" runat="server">

这是在我更改之后。

<form class="form-horizontal" id="validationForm" onsubmit="return $('#validationForm').valid()" method="post" runat="server">

以为我仍然不知道为什么即使验证返回 false 也会触发回发

【讨论】：