javascript - 结合 MicrosoftMvcJQueryValidation 和 Ajax 提交

Question

我在尝试在表单中应用 MS JQuery 验证时遇到问题，我想通过 Ajax 调用提交数据。我正在使用 DataAnnotations 和 MicrosoftMvcJQueryValidation.js 库来执行客户端和服务器端验证。

服务器验证效果很好，我正在尝试通过以下方式启用客户端验证

     <% 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>

然后通过自定义 Ajax 调用来管理 onclick 事件。在我的页面源代码中，我可以看到该部分

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

但我想在实际 Ajax 调用之前验证数据。

相反，通过使用提交输入和

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

执行客户端验证，但不执行ajax调用，表单通过回发提交。

有什么方法可以让它们一起工作而不改变 jQuery.validate 库吗？

这可能吗？我是否使用了错误的方法？

提前致谢

Answer 1

我没有找到任何解决方案如何使用 MicrosoftMvcJQueryValidation.js ajax 提交表单而不修改它。这是我的解决方法:

1) 在“MicrosoftMvcJQueryValidation.js”文件中添加以下代码，位于“”function __MVC_EnableClientValidation(validationContext)中的“theForm.validate(options);”之前)”:

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

2) 使用此 js 函数向 .validate() 方法添加自己的选项:

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)ajax提交表单使用:

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

请记住，您可以添加任何有效的 options对于 .validate() 函数。必须加载 jquery.validate 和 jquery.forms 插件。

希望有帮助。