ASP.Net MVC Ajax form with jQuery validation

Question

I have an MVC view with a form built with the Ajax.BeginForm() helper method, and I'm trying to validate user input with the jQuery Validation plugin. I get the plugin to highlight the inputs with invalid input data, but despite the invalid input the form is posted to the server.

How do I stop this, and make sure that the data is only posted when the form validates?

My code

---

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

---

The JavaScript validation:

$(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: As I was getting downvotes for publishing follow-up problems and their solutions in answers, here is also the working validate method...

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

Try adding an OnBegin callback to the AjaxOptions and return the value of $('form').validate().form() from the callback. Looking at the source it appears that this should work.

function ajaxValidate() {    return $('form').validate().form(); }  <% using (Ajax.BeginForm("Post", new AjaxOptions        {            UpdateTargetId = "GBPostList",            InsertionMode = InsertionMode.InsertBefore,            OnBegin = "ajaxValidate",            OnSuccess = "getGbPostSuccess",            OnFailure = "showFaliure"        }))        { %> 

EDIT updated with correct callback name.