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

时间:2015-04-27 08:16:38

标签: javascript c# jquery asp.net validation

我有一个ASP.Net网页表单页面,我已经应用了JQuery验证。问题是,当验证失败时,页面仍然会回发。我有两个文本框,有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()方法中,&amp;发现一切都工作正常,但在方法结束后,页面回发。我在浏览器的控制台上运行了JQuery valid()方法,并且运行正常,返回正确的值。
当文本框为空时: When Textbox(es) are empty 填写文本框时: When Textboxes are filled

问题究竟在哪里?如何在验证失败时停止回发页面?

3 个答案:

答案 0 :(得分:1)

使用

  

onclick =&#34;返回checkValidate(event);&#34;

答案 1 :(得分:1)

你可以这样做:

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

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

根据评论,在这种情况下,你可以使用:

onclick =“return !! yourFunction()”

无需更改onserverclick =“”

答案 2 :(得分:0)

我终于完成了。我只是在我的表单上添加onsubmit属性并在其中设置jquery有效方法。
这是我的表格代码预告片

public function render($request, Exception $e)
{
    if ($e instanceof APIException){
        return response(['success' => false, 'data' => [], 'message' => $e->getMessage(), 401);
    }
    if ($e instanceof SomeException){
        return response(['success' => false, 'data' => [], 'message' => 'Exception'], 401);
    }

    return parent::render($request, $e);
}

这是在我改变它之后。

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

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

也会触发回发