Question

I’m having troubles trying to apply MS JQuery Validation in my forms where I want to submit data via an Ajax call. I am using DataAnnotations and MicrosoftMvcJQueryValidation.js library to perform client-side and server-side validation.

Server validation works great and I’m trying to enable Client validation by mean of

     <% Html.EnableClientValidation(); %>  
  <%= Html.ValidationSummary("Create was unsuccessful. Please correct the errors and try again.") %>  

     <div id="formContainer">  
         <% using(Html.BeginForm()){ %>  

             <table class="formTable" width="100%" border="0" cellspacing="0" cellpadding="0">  

             <tr>  
                 <td><label for="Description">Description:</label></td>  
                 <td><%= Html.TextBox("Description", Model.Description) %>  
                 <%= Html.ValidationMessage("Description", "*") %></td>  
             </tr>  
             <tr>  
                 <td> </td>  
                 <td>  
                 <%=Html.Button("cancelBtn","Cancel")%>  
                 <input id='createBtn' class='button' type='button' value='Create'  />  
                 </td>  
             </tr>  

             </table>  
         <% } %>  

     </div>

The onclick event is then managed via a custom Ajax call. In my page source I can see the section

//<![CDATA[EnableClientValidation(...)]

but I would like to validate data before the actual Ajax call.

At the contrary by using a submit input and

inputCreate.submit(function () {$.ajax...}); 

client-side validation is performed but no ajax-call is performed, form is submitted via postback.

Is there any way to make them work together without changing jQuery.validate library?

Is it possible? Am I using a wrong approach to this?

Thanks in advance

Answer 1

I did not found any solution how to use MicrosoftMvcJQueryValidation.js to ajax submit form without modifying it. Here is my workaround :

1) add folowing code in “MicrosoftMvcJQueryValidation.js” file, just before “theForm.validate(options);” in "function __MVC_EnableClientValidation(validationContext)” :

if (typeof (validationContext.validationOptions) != undefined && validationContext.validationOptions != null) $().extend(options, validationContext.validationOptions);

2) use this js functions to add own options to .validate() method:

function setFormValidationOptions(formId, options) {
    if (typeof (formId) == undefined || formId == null || typeof (options) == undefined || options == null) return;
    if (window.mvcClientValidationMetadata) {
        for (i = 0; i < window.mvcClientValidationMetadata.length; i++)
            if(window.mvcClientValidationMetadata[i].FormId == formId)
                window.mvcClientValidationMetadata[i].validationOptions = options;
    }
}

3) to ajax submit form use :

valOpt = {
    submitHandler: function(form) {
        $(form).ajaxSubmit({
            target: "#output"
        });
    }
};
setFormValidationOptions("myFormId", valOpt);

Remember you can add any valid options for .validate() function. Both jquery.validate and jquery.forms plugins must be loaded.

Hope it helps.