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

Posted 2023-05-09

【中文标题】JQuery验证失败后页面仍然回发

【英文标题】：Page still Postbacks after JQuery validation fail

【发布时间】：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

您还没有显示表单的来源，尽管这个问题可能会帮助***.com/q/3591634/1741542

【参考方案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 也会触发回发