jQuery 带有 jQuery 验证的 ASP.Net MVC Ajax 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/298691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.Net MVC Ajax form with jQuery validation
提问by Tomas Aschan
I have an MVC view with a form built with the Ajax.BeginForm() helper method, and I'm trying to validate user input with the jQuery Validation plugin. I get the plugin to highlight the inputs with invalid input data, but despite the invalid input the form is posted to the server.
我有一个 MVC 视图，其中包含一个使用 Ajax.BeginForm() 辅助方法构建的表单，我正在尝试使用jQuery Validation plugin验证用户输入。我让插件突出显示输入数据无效的输入，但尽管输入无效，但表单仍会发布到服务器。
How do I stop this, and make sure that the data is only posted when the form validates?
我如何阻止这种情况，并确保仅在表单验证时发布数据？
My code
我的代码
The form:
表格：
<fieldset>
<legend>leave a message</legend>
<% using (Ajax.BeginForm("Post", new AjaxOptions
{
UpdateTargetId = "GBPostList",
InsertionMode = InsertionMode.InsertBefore,
OnSuccess = "getGbPostSuccess",
OnFailure = "showFaliure"
}))
{ %>
<div class="column" style="width: 230px;">
<p>
<label for="Post.Header">
Rubrik</label>
<%= Html.TextBox("Post.Header", null, new { @style = "width: 200px;", @class="text required" }) %></p>
<p>
<label for="Post.Post">
Meddelande</label>
<%= Html.TextArea("Post.Post", new { @style = "width: 230px; height: 120px;" }) %></p>
</div>
<p>
<input type="submit" value="OK!" /></p>
</fieldset>
The JavaScript validation:
JavaScript 验证：
$(document).ready(function() {
// for highlight
var elements = $("input[type!='submit'], textarea, select");
elements.focus(function() {
$(this).parents('p').addClass('highlight');
});
elements.blur(function() {
$(this).parents('p').removeClass('highlight');
});
// for validation
$("form").validate();
});
EDIT:As I was getting downvotes for publishing follow-up problems and their solutions in answers, here is also the working validate method...
编辑：当我因为在答案中发布后续问题及其解决方案而受到反对时，这里也是有效的验证方法......
function ajaxValidate() {
return $('form').validate({
rules: {
"Post.Header": { required: true },
"Post.Post": { required: true, minlength: 3 }
},
messages: {
"Post.Header": "Please enter a header",
"Post.Post": {
required: "Please enter a message",
minlength: "Your message must be 3 characters long"
}
}
}).form();
}
回答by tvanfosson
Try adding an OnBegin callback to the AjaxOptions and return the value of $('form').validate().form() from the callback. Looking at the sourceit appears that this should work.
尝试将 OnBegin 回调添加到 AjaxOptions 并从回调中返回 $('form').validate().form() 的值。查看来源似乎这应该有效。
function ajaxValidate() {
return $('form').validate().form();
}
<% using (Ajax.BeginForm("Post", new AjaxOptions
{
UpdateTargetId = "GBPostList",
InsertionMode = InsertionMode.InsertBefore,
OnBegin = "ajaxValidate",
OnSuccess = "getGbPostSuccess",
OnFailure = "showFaliure"
}))
{ %>
EDITupdated with correct callback name.
编辑更新了正确的回调名称。
