ajax.beginform and xVal

Question

I am using Ajax.BeginForm to submit a form ans xVal to enforce validation

The problem the ajax post request is being made even when the form has errors on it. I know client-side validation is working, because it is displaying proper error messages and what not, but why it thinks it is okay to make the ajax request anyway is something I don't understand.

I even tried putting causesvalidation = true inside the submit tab, but the form is still being submitted.

    <% using (Ajax.BeginForm("SuggestTemp", new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Result" }))
       {%>

        <table>
         <tr>
        <td style="text-align:right">
            Title
        </td>
        <td>
            <%= Html.TextBox("Upload.Title")%>
            <%= Html.V
alidationMessage("Upload.Title")%>
        </td>
        </tr> <tr><td><%=Html.ClientSideValidation<Upload>("Upload") %></td><td></td></tr>
        <tr><td></td><td><input type = "submit" causesvalidation = "true"  value = "Suggest " class = "btn"/></td></tr> 
      </table>
      <div id = "Result"><%=ViewData["SuggestStatus"]%></div> 

Answer 1

I'm going to recommend you to use jquery.form instead, (never saw people complaining about jquery.form)

and here's how you do validation with it (with jquery.validate, xval uses it):

$(document).ready(function() { 
    // bind form using ajaxForm 
    $('#myForm2').ajaxForm( { beforeSubmit: function(){return $('#myForm2').validate().valid();}} ); 
});

http://jquery.malsup.com/form/#validation

Answer 2

try to put $("#yourFormId").validate() to the OnBegin parameter

Ex:

<%
using (Ajax.BeginForm("SuggestTemp", "yourControllerName", new{}, new AjaxOptions
{
    HttpMethod = "POST",
    OnBegin = "function(){$('#myForm').validate();}"
},
new { id = "myForm" }){ %>