Formulaire Ajax ASP.Net MVC avec validation jQuery

Question

J'ai un MVC vue avec un formulaire construit avec l'Ajax.BeginForm() méthode d'aide, et je suis en train de valider la saisie de l'utilisateur avec le plugin jQuery Validation. J'ai récupérer le plugin pour mettre en évidence les entrées non valides les données d'entrée, mais en dépit de l'entrée non valide le formulaire est posté sur le serveur.

Comment puis-je arrêter cela, et assurez-vous que les données sont publiées uniquement lorsque le formulaire est valide?

Mon code

---

La forme:

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

---

La validation 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: Comme j'ai été faire downvotes pour la publication de suivi des problèmes et de leurs solutions dans les réponses, voici également le travail de valider la méthode...

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

Essayez d'ajouter un rappel OnBegin aux AjaxOptions et renvoyez la valeur de $ ('form'). Validate (). Form () à partir du rappel. En regardant la source, il semble que cela devrait fonctionner.

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

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

EDIT mis à jour avec le nom de rappel correct.