Mẫu ASP.Net MVC Ajax với xác thực jQuery

Question

Tôi có chế độ xem MVC với biểu mẫu được xây dựng bằng phương thức trợ giúp Ajax.BeginForm() và tôi đang cố gắng xác thực đầu vào của người dùng bằng jQuery Validation plugin. Tôi nhận được các plugin để làm nổi bật các đầu vào với dữ liệu đầu vào không hợp lệ, nhưng mặc dù đầu vào không hợp lệ biểu mẫu được đăng lên máy chủ.

Làm cách nào để dừng điều này và đảm bảo rằng dữ liệu chỉ được đăng khi biểu mẫu xác thực?

Mã của tôi

---

Hình thức:

<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> 

---

Việc xác 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: Như tôi đã nhận được downvotes cho pu blishing vấn đề theo dõi và giải pháp của họ trong câu trả lời, đây cũng là phương thức validate làm việc ...

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(); 
} 

Answer 1

Hãy thử thêm một callback OnBegin đến AjaxOptions và trả về giá trị của $ ('form'). validate () .form() từ cuộc gọi lại. Nhìn vào các source nó xuất hiện rằng điều này sẽ làm việc.

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

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

EDIT cập nhật với tên gọi chính xác.