28
我有一個使用Ajax.BeginForm()輔助方法構建的表單的MVC視圖,我試圖驗證jQuery Validation plugin的用戶輸入。我得到插件用無效輸入數據突出顯示輸入,但儘管輸入無效,表單也會發布到服務器。ASP.Net MVC使用jQuery驗證的Ajax表單
我該如何解決這個問題,並確保數據僅在表單驗證後發佈?
我的代碼
形式:
<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();
});
編輯:當我越來越downvotes爲PU blishing後續問題及其答案的解決方案,這裏也是工作validate方法...
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();
}
OnSubmit不是VS智能感知中的可用選項之一。但是,如果使用OnBegin,則您的解決方案就像魅力一樣。非常感謝您的快速和正確的答案! =) – 2008-11-18 14:52:29