Combining MicrosoftMvcJQueryValidation and Ajax Submit

Answer 1

Hi. 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;
    }
});