我有一个MVC视图与使用Ajax.BeginForm()辅助方法构建的表单，我试图验证用户输入与
jQuery Validation plugin.我得到插件突出显示输入与无效的输入数据，但尽管无效的输入表单发布到服务器。
如何停止此操作，并确保数据仅在表单验证时发布？
我的代码
表格：
<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>
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();
});
编辑：当我得到downvote出版后续问题和他们的解答在答案，这里也是工作验证方法…
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();
}
解决方法
尝试向AjaxOptions添加一个OnBegin回调，并从回调中返回$(‘form’)。validate()。form()的值。看看
source它似乎这应该工作。
function ajaxValidate() {
return $('form').validate().form();
}
<% using (Ajax.BeginForm("Post",new AjaxOptions
{
UpdateTargetId = "GBPostList",OnBegin = "ajaxValidate",OnFailure = "showFaliure"
}))
{ %>
EDIT已更新为正确的回调名称。
