页面仍然回传后jQuery验证失败 [英] Page still Postbacks after JQuery validation fail

问题描述

我有我已经申请jQuery验证一个ASP.Net Web窗体页。问题是，当验证失败，页面还是回发。我有有需要两个文本框：真正的验证。
这是我的提交按钮的代码：

 <按钮ID =btnSubmit按钮级=BTN BTN-INFO TYPE =按钮onserverclick =btnSubmit_Click的onclick =checkValidate（事件）;的CausesValidation =真正的
 =服务器> 
< I类=图标OK更大-110>< / I>提交
< /按钮> 
  

这是jQuery的validate方法：

<$ P 。$ p> $（函数（）{
$（'＃validationForm'）验证（{

errorElement：'跨越'，
errorClass： 帮助内联'，
focusInvalid：假的，
//调试;
规则：{
<％= txtName.UniqueID％计算值：{
要求：真正的
}，
<％= txtDescription.UniqueID％计算值：{
要求：真正的
}
}，

消息：{
<％= txtName.UniqueID％计算值：{
要求：请提供有效的名称为
}，
<％= txtDescription.UniqueID ％计算值：{
要求：请指定一个描述。
}，
}，
invalidHandler：函数（事件，验证器）上的表格{//显示错误警报提交
$显示（）（警报的错误。'，$（）登录形式。'）。
}，

亮点：功能（E）{
$（五）.closest（'。控制组'）removeClass移除（'信息'）addClass（'。错误'）;
}，

成功：功能（E）{
$（五）.closest（'。控制组'）removeClass移除（'错误'）addClass（'。信息'）;
$（E）上卸下摆臂（）;
}，

submitHandler：功能（形式）{
}，
invalidHandler：功能（形式）{
}
}）;
}）


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

 函数checkValidate（EVT）{
 //验证表单并保留结果。 // 
变种的isValid = $（'＃validationForm'）有效（）; 
 // //如果表格没有验证，防止表单提交。 // 
 //调试; 
如果{
 evt.preventDefault（）（isValid方法！）; 
 evt.stopPropagation（）; 
返回FALSE; } 
，否则
返回真; 
} 
  

这是我的按钮呈现的HTML：

 <按钮的onclick =checkValidate（事件）; __doPostBack（'ctl00 $ ContentPlaceHolder1 $ btnSubmit按钮'，''）ID =ContentPlaceHolder1_btnSubmit级= BTN BTN-信息类型=按钮> 
< I类=图标OK更大-110>< / I>提交
< /按钮> 
  

另外，我已经把调试器在checkValidate（）方法，和放大器;发现一切正常存在，但方法结束后，页面回发。我跑了浏览器的控制台上的JQuery的有效（）方法，它也运行良好，返回正确的值。

当文本框（ES）为空：

当文本框填入：

确切位置在哪里出了问题？我怎样才能在验证失败？

解决方案

我终于做到了停止回传页面。我只是我的表单上添加的onsubmit属性，并设置了jQuery有效的方法吧。
这是我的表单代码早期的教

 <窗体类=形横ID = validationForm的方法=邮报=服务器> 
  

这是后，我改变了它。

 <窗体类=形横ID =validationForm的onsubmit =返回$（'＃validationForm'）有效的（）方法=邮报RUNAT =服务器> 
  

思想我仍然不知道为什么它触发回发，即使验证返回false

I have an ASP.Net web form page on which I've applied JQuery validation. The problem is, when the validation fails, the page still postbacks. I have two textboxes which have required : true validation. This is my submit button code :

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

This is JQuery's validate method :

$(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) {
                    }
                });
                })

And this is the method which checks for the validation on button click:

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

This is the rendered HTML of my button :

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

Also, I've put the debugger in the checkValidate() method, & found that everything is working fine there, but after the end of method, the page postbacks. I ran the JQuery valid() method on browser's console, and it's also running fine, returning the correct values.
When Textbox(es) are empty : When Textboxes are filled :

Where exactly is the problem? How can I stop page from postback when validation fails?

解决方案

I've done it finally. I've just add onsubmit property on my form and set the jquery valid method in it.
This was my form code eariler

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

And this is after I changed it.

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

Thought I still have no idea that why it's triggering postback even when the validation returning false

这篇关于页面仍然回传后jQuery验证失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！