如何使用 javascript 提交 ASP.NET MVC 表单并仍然在客户端进行验证？

Question

我有一个运行良好的 ASP.NET MVC 2 表单，它进行客户端验证（使用数据注释）。每当用户点击提交按钮时，客户端验证就会在表单实际回传到服务器之前启动。

这是实际的代码，非常基础的东西：

<% Html.EnableClientValidation(); %>
<% using (Html.BeginForm()) { %>
    <%= Html.ValidationSummary(true) %>
    <%: Html.EditorForModel() %>
    <p>
        <input type="submit" value="Save" />
    </p>
<% } %>

现在这是我的问题：我想使用一个不在

内的按钮提交表单，就像上面示例中的那个一样。这个按钮需要放在页面上一个单独的

中，它就像我的应用程序中所有按钮和操作的工具栏一样。

我可以使用类似这样的方式（使用 jQuery）提交表单：

<asp:Content ID="Content2" ContentPlaceHolderID="ToolBarContent" runat="server">
    <input type="submit" value="Save" onclick="$('#form0').submit();" />
</asp:Content>

唯一的问题是这不会触发客户端验证，就像用户点击普通提交按钮一样。回发整个表单，执行服务器端验证，并再次呈现视图以显示验证错误。

我不想让这个常规的提交按钮和表单一起出现，只需要在工具栏中有这个，那么有没有办法做到这一点？有一个单独的按钮调用表单的提交，同时仍然触发表单的客户端验证？

【问题讨论】：

Answer 1

如果您使用 MicrosoftMvcValidation.js，请尝试 $("#yourform").validate("submit"); 或者 $("#yourform").validate() 如果你使用 jquery.validate.js

Answer 2

你可以试试 jQuery 的 Ajax Form 插件。

http://jquery.malsup.com/form/

您也可以通过$('#form').submit(function() { }) 附加到表单的提交事件

Answer 3

验证方法附加到表单的提交事件，这意味着您应该能够从 javascript 调用 form.submit() 并且提交事件应该仍然触发。

Answer 4

试试这个技巧：

<input type="submit" value="Save" onclick="$('#dummy').click();" />

dummy 是表单中隐藏的 submit 按钮。

如果Save 按钮没有放在form 中，则它也不必是submit 按钮。