不提交表单的 MVC 表单验证

Posted

技术标签:

【中文标题】不提交表单的 MVC 表单验证【英文标题】:MVC form validation without form submission 【发布时间】:2013-05-06 09:05:15 【问题描述】:

我有一个标准表单,由具有标准 [必需] 验证的 MVC 模型填充。我想通过 AJAX “提交”此表单数据,而不是通过提交,并且我想利用内置的 MVC/razor 验证功能。我不知道如何在不触发表单提交事件的情况下触发客户端验证。

这是我的剃刀标记:

@using (html.BeginForm()) 
     <span class="label">Team Name:</span>&nbsp;@Html.TextBoxFor(m => m.Name)
     @Html.ValidationMessageFor(m => m.Name)

这是我的模型:

public class Team

    [Required(ErrorMessage = "Required")]
    public string Name  get; set; 

看起来这应该是一件容易的事。它在提交时效果很好。我只需要知道如何手动调用验证方法。

【问题讨论】:

See this 【参考方案1】:

默认情况下启用此功能,但由于您可能没有添加到所需 javascript 库的链接,它一直没有工作。

<script src="~/Scripts/jquery-1.7.1.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

【讨论】:

您可能正在获得服务器端验证。如果您没有 jquery.validate 脚本,您将无法获得客户端验证。 $('form').submit() 也应该触发客户端验证。 呃,我早该知道,就这么简单。我提交的所有表格都有这些库;那些通过 Ajax 提交的,错过了它们......谢谢!【参考方案2】:

由于这是最佳答案,当您在谷歌搜索“mvc 验证表单提交”时,我必须添加另一点,这让我浪费了几个小时。使用时

@Html.ValidationSummary()

在您的代码中,即使您添加了这些库并设置了表单,也会提交表单

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />

在 webconfig 的 appSettings 属性中。

【讨论】:

以上是关于不提交表单的 MVC 表单验证的主要内容,如果未能解决你的问题,请参考以下文章

由于 Spring MVC 中不存在 URL,验证表单提交按钮在第二次尝试后返回 404

MVC 验证、表单提交、光标等待问题

ASP.NET MVC 网站开发总结——Ajax异步提交表单之检查验证码

ASP.NET Core 5 MVC:在模态窗口之前验证表单

Jquery 验证触发但不阻止表单提交

如何在不提交表单的情况下进行客户端远程验证?