Combining MicrosoftMvcJQueryValidation and Ajax Submit
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
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.
$("input#createBtn").click(function() {
theform = $(this).closest("form");
if (theform.validate().form()) {
jQuery(theform).ajaxSubmit({
target: "#formContainer"
});
}
else {
return false;
}
});
精彩评论