ASP.Net MVC Ajax Form mit jQuery Validierung

Question

Ich habe eine MVC-Ansicht mit einer mit der Ajax.BeginForm() Hilfsmethode gebaut Form, und ich versuche, eine Benutzereingabe mit den jQuery Validation plugin zu validieren. Ich erhalte das Plugin, um die Eingaben mit ungültigen Eingabedaten hervorzuheben, aber trotz der ungültigen Eingabe wird das Formular an den Server gesendet.

Wie verhindere ich das, und sicherstellen, dass die Daten nur geschrieben wird, wenn das Formular validiert?

Mein Code

---

Die Form:

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

---

Die JavaScript-Validierung:

$(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: Als ich für pu bekommen downvotes blishing Follow-up-Probleme und ihre Lösungen in Antworten, hier ist auch die Arbeits Validate-Methode ...

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

Versuchen Sie, die Ajaxoptions einen OnBegin Rückruf Hinzufügen und geben den Wert von $ (‚Form‘). Validierung () .form() vom Rückruf. Mit Blick auf den source es scheint, dass dies funktionieren soll.

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

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

EDIT mit Namen korrekt Rückruf aktualisiert.