ASP.NET MVC 必填字段指示器答案

【问题标题】：ASP.NET MVC Required Field IndicatorASP.NET MVC 必填字段指示器
【发布时间】：2014-11-06 15:00:00
【问题描述】：

对于我的 ASP.NET MVC 视图中已按要求进行属性化的字段，框架是否有任何方法可以自动呈现某种指示符，表明该字段在元数据中被标记为必需？

【问题讨论】：

【解决方案1】：

应该可以用 CSS 做到这一点，因为 MVC3 将这些自定义属性添加到元素中：

 <input data-val="true" data-val-required="The Username field is required." id="Username" name="Username" type="text" value="" />

您可以像这样在 CSS 中关闭 data-val-required：

输入[data-val-required] { 背景：红色 } 或设置星号等背景图片。

【讨论】：

它只用javascript添加它。
刚刚发现这也很有用。
非常聪明，我喜欢这样的答案

【解决方案2】：

我这样做是因为我的必填字段必须是动态的（在配置文件中定义）

在视图末尾添加：

    <script type="text/javascript">
        $('input[type=text]').each(function () {
            var req = $(this).attr('data-val-required');
            if (undefined != req) {
                var label = $('label[for="' + $(this).attr('id') + '"]');
                var text = label.text();
                if (text.length > 0) {
                    label.append('<span style="color:red"> *</span>');
                }
            }
        });
    </script>

【讨论】：

很棒的酱汁。这很好用——谢谢！有关包含更多字段类型的扩展，请参阅下面的评论。

【解决方案3】：

我修改了 Renato Saito 的答案以包含更多字段类型（所有类型的输入和选择列表）并使用 jQuery 命名空间而不是通用的 $。这是我的修改：

<script type="text/javascript">
// add indicator to required fields
jQuery('input,select').each(function () {
    var req = jQuery(this).attr('data-val-required');
    if (undefined != req) {
        var label = jQuery('label[for="' + jQuery(this).attr('id') + '"]');
        var text = label.text();
        if (text.length > 0) {
            label.append('<span style="color:red"> *</span>');
        }
    }
});
</script>

【讨论】：

【解决方案4】：

这是一个将红色星号附加到具有“data-val-required”属性的任何内容的右侧。

<script type="text/javascript">
    $('[data-val-required]').after('<span style="color:red; font-size: 20px; vertical-align: middle;"> *</span>');
</script>

【讨论】：

【解决方案5】：

添加 html 属性是不够的。这只会导致 javascript 验证错误。如果您想指示该字段是必填字段，您可能需要在其中添加一个星号。您可以通过 HtmlHelper 的扩展方法来完成。你可以在这里找到详尽的解释

Indicating required field in MVC application

【讨论】：

【解决方案6】：

在我这边做了一个小的修改。实际上我有主键（数据库中的身份列）。我不想强调。所以我使用了Below Code Snippet 来只选择input[type=text] 在注解中有required 属性的字段。

$("[data-val-required]").not(":hidden").not(":radio").not(":checkbox").after('<span style="color:red;max-width:10px;min-height:30px;">*</span>');

【讨论】：