Combining MicrosoftMvcJQueryValidation and Ajax Submit

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.

Answer 2

$("input#createBtn").click(function() { theform = $(this).closest("form"); if (theform.validate().form()) { jQuery(theform).ajaxSubmit({ target: "#formContainer" }); } else { return false; } });