MVC 验证数据注释未呈现正确的 HTML5 属性答案

【问题标题】：MVC validation Data Annotations are not rendering correct HTML5 attributeMVC 验证数据注释未呈现正确的 HTML5 属性
【发布时间】：2014-10-23 14:58:26
【问题描述】：

我试图了解为什么我的 MVC 数据注释没有呈现 HTML 5 所需的标记。我认为问题是 HTML5 和 MVC 相关而不是 JQuery 验证。

根据documentation here，所有浏览器都支持它，但我开发的三个浏览器，IE、Chrome、Firefox 没有呈现该属性？

我认为我的场景非常简单。

MVC 控制器填充模型，然后传递给视图。用户填写字段并单击提交。即使字段留空，验证总是通过？模型状态无效，因此控制器将其踢回，但我希望客户端验证能够捕获空字段。我有一个 jsfiddle 来演示，但首先让我提供模型。

public partial class FinRecordModel
{        
    [Required]
    public virtual string FinName { get; set; }

    [Required]
    public virtual string PageLocation { get; set; }
}

观点：

    @Html.LabelFor(model => model.FinName):
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.FinName)
            @Html.ValidationMessageFor(model => model.FinName)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.LabelFor(model => model.PageLocation):
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.PageLocation)
            @Html.ValidationMessageFor(model => model.PageLocation)
        </td>

我创建了这个 jsfiddle，它使用浏览器呈现的 html 并且验证总是通过。

http://jsfiddle.net/ramjet/mo0v2b76/5/

现在，如果我添加了在这个 jsfiddle 中看到的所需属性，那么一切都会按预期工作，所以只是想知道发生了什么？？？

http://jsfiddle.net/ramjet/mo0v2b76/6/

如果这是 HTML5 / MVC 愚蠢的，因为新的 HTML 标准仍在整合到网络中，那么也许我应该有一个使用 jquery 的文档加载功能来将所需的属性添加到输入字段？

感谢您的意见/建议。

【问题讨论】：

不确定我是否理解您的问题，但如果启用了客户端验证，则帮助程序会呈现 data-val="true" data-val-required="xxx" 等属性，jquery.validate.unobtrusive 使用这些属性进行客户端验证（required属性不是必需的）。如果您想要其他一些验证插件的属性，那么您可以使用 @Html.TextBoxFor(m => m.FinName, new { required = "required" }) 添加它
啊……那是我丢失的信息。将此评论作为答案，我会标记...此外，您还在这里stackoverflow.com/questions/26442250/… 回答了我的另一个问题，并且还需要将您的评论作为答案。
对其他问题添加了额外的评论，虽然我猜你已经解决了。现在一切正常吗？

标签： jquery asp.net-mvc html unobtrusive-validation

【解决方案1】：

标准的 html 助手渲染用于客户端验证的 data-xxx 属性与 jquery.validate.unobtrusive 关联，因此它不会渲染 required 属性。如果您需要其他一些验证插件，您可以使用帮助程序的重载添加 html 属性，例如

@Html.TextBoxFor(m => m.FinName, new { required = "required" })

请注意，如果您不使用 jquery.validate.unobtrusive，您可以在 web.config 文件中将其关闭，这样就不会创建 data-xxx 属性。

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

或在控制器级别

HtmlHelper.ClientValidationEnabled = false;
HtmlHelper.UnobtrusiveJavaScriptEnabled = false;

【讨论】：

【解决方案2】：

实际上，当您将数据注释附加到模型时，辅助类 @Html.ValidationMessageFor(//) 可以工作。如果您使用辅助类进行验证，则需要/必须使用注释来满足不同的验证。如果您只是使用了帮助类，即 @Html.ValidationMessageFor(//) 并且没有在模型上使用注释标签，那么 jquery 验证默认情况下不会呈现任何验证。

因此，当您在模型上使用所需的验证时，新视图会使用带有 required 属性的输入标签呈现（您也可以在源代码中检查这一点，在您在模型中附加所需的注释标签后，新页面具有输入标签具有必需的属性）。

基本上，注释标签只不过是 HTML 5 支持的不同验证属性。您在模型中使用了它们，ASP.Net 服务器将它们呈现为您的客户端输入标记验证属性，并将生成的 HTML 发送到客户端。

是的，您也可以使用 jquery onload 方法添加所需的属性，但如果您使用 MVC/C# 组合，请使用注释标签，因为这是建议。

【讨论】：