@ Html.ValidationMessageFor检查是否为空

Question

有这个代码

<div class="alert alert-danger">
            @Html.ValidationMessageFor(u => u.Email, null, new { @class = "test" })
        </div>

它应该使用alert alert-danger引导类来处理错误消息。但在这种情况下，alert alert-danger div随时可见，即使没有任何验证错误。

有没有办法检查是否出现错误消息并仅在这种情况下显示alert alert-danger div？

Answer 1

将类添加到ValidationMessageFor帮助程序本身，而不是添加到已删除的div：

@Html.ValidationMessageFor(u => u.Email, "Your message", new { @class = "test alert alert-danger" })

<强>更新

除此之外，您还需要修改添加到有效输入的.field-validation-valid类来隐藏它：

.field-validation-valid
{
  padding: 0 !important;
  margin: 0 !important;
  display: none !important;
}

Answer 2

如果您使用不引人注目的验证，则在验证更改时，您需要使用JavaScript动态显示和隐藏包装器div。

这是一个概念验证，希望能够接近你所需要的。 （请注意，它依赖于不引人注意的验证的一些实现细节，因此无法保证它在所有情况下都能正常工作。）

<!-- i've added a new "valmsg-wrapper" class to your div -->
<div class="alert alert-danger valmsg-wrapper">
    @Html.ValidationMessageFor(u => u.Email, null, new { @class = "test" })
</div>

<script>
    $(function () {
        // hide the wrapper div on load if there's no server-side validation message
        $('div.valmsg-wrapper').not(':has(span.field-validation-error)').hide();
    });

    // store the existing highlight/unhighlight functions before overriding them
    var original_highlight = $.validator.defaults.highlight;
    var original_unhighlight = $.validator.defaults.unhighlight;

    $.validator.setDefaults({
        highlight: function (elem, err, val) {
            // call the highlight function and then show the relevant wrapper div
            original_highlight(elem, err, val);
            $('div.valmsg-wrapper').has('span[data-valmsg-for="' + elem.name + '"]').show();
        },
        unhighlight: function (elem, err, val) {
            // call the unhighlight function and then hide the relevant wrapper div
            original_unhighlight(elem, err, val);
            $('div.valmsg-wrapper').has('span[data-valmsg-for="' + elem.name + '"]').hide();
        }
    });
</script>