我有一个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()方法,并且运行正常,返回正确的值。
当文本框为空时:
填写文本框时:
问题究竟在哪里?如何在验证失败时停止回发页面?
答案 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
也会触发回发