2008-11-18 53 views
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(); 
} 

回答

30

嘗試添加OnBegin回調到AjaxOptions並返回$(「形式」)的值。驗證( ).form()從回調。看着source看來,這應該工作。

function ajaxValidate() { 
    return $('form').validate().form(); 
} 

<% using (Ajax.BeginForm("Post", new AjaxOptions 
     { 
      UpdateTargetId = "GBPostList", 
      InsertionMode = InsertionMode.InsertBefore, 
      OnBegin = "ajaxValidate", 
      OnSuccess = "getGbPostSuccess", 
      OnFailure = "showFaliure" 
     })) 
     { %> 

編輯用正確的回調名稱更新。

+1

OnSubmit不是VS智能感知中的可用選項之一。但是,如果使用OnBegin,則您的解決方案就像魅力一樣。非常感謝您的快速和正確的答案! =) – 2008-11-18 14:52:29