Formularz ASP.Net MVC Ajax z walidacją jQuery

Question

Mam widok MVC z formularzem zbudowanym przy użyciu metody pomocnika Ajax.BeginForm() i próbuję sprawdzić dane wejściowe użytkownika za pomocą jQuery Validation plugin. Dostaję wtyczkę, aby podświetlić wejścia z nieprawidłowymi danymi wejściowymi, ale pomimo nieprawidłowych danych wejściowych formularz jest wysyłany na serwer.

Jak mogę to zatrzymać i upewnić się, że dane są publikowane tylko po zatwierdzeniu formularza?

Mój kod

---

Postać:

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

---

Walidacja 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: jak szykowałem downvotes dla pu blishing uzupełniających problemy i ich rozwiązania w odpowiedzi, tutaj jest również metoda sprawdzania poprawności pracy ...

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

spróbować dodać zwrotnego OnBegin do AjaxOptions i zwraca wartość $ („form”). walidacji () .form() z wywołania zwrotnego. Patrząc na source wydaje się, że to powinno działać.

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

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

EDIT aktualizowana o poprawnej nazwie zwrotnego.