Question

我有一个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

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

Answer 1

使用

onclick =＆＃34;返回checkValidate（event）;＆＃34;

Answer 2

你可以这样做：

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

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

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

onclick =“return !! yourFunction（）”

无需更改onserverclick =“”

Answer 3

我终于完成了。我只是在我的表单上添加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

也会触发回发

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

3 个答案: