在验证之前显示自定义验证属性错误消息

Question

我正在尝试使用自定义验证属性来确保复选框最终被选中。但是，验证错误在验证触发之前作为复选框标签的一部分显示（未设置样式）。

详情：

我有以下属性和属性：

[Display(Name = "TermsAndConditions", ResourceType = typeof(Res.Labels))]
[MustBeTrue(ErrorMessageResourceName = "TermsAndConditionsValidationMessage", ErrorMessageResourceType = typeof(Res.Labels))]
public bool TermsAndConditions { get; set; } = true;

（无论出于何种原因。默认为 true 是故意的。它在视图中换回 false）：

@model MyModel
@{ 
        MyModel.TermsAndConditions = false;
}

自定义属性如下所示：

public class MustBeTrueAttribute : ValidationAttribute, IClientValidatable
    {
        public override bool IsValid(object value)
        {
            return value is bool && (bool)value;
        }

        public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            yield return new ModelClientValidationRule
            {       
                ErrorMessage = FormatErrorMessage(Labels.TermsAndConditions),
                ValidationType = "mustbetrue"
            };
        }
    }

视图中的 HTML 如下所示：

<div class="checkbox">
    @Html.CheckBoxFor(m => m.TermsAndConditions, true)
    <div class="state">
        <label for="terms">
            @Html.Raw(Label.TermsAndConditions)
            @Html.ValidationMessageFor(m => m.TermsAndConditions, Label.TermsAndConditionsValidationMessage)
        </label>
    </div>
</div>

HTML.Raw 用于我需要标签来呈现锚元素，我找不到其他方法来做到这一点。

页面加载时生成的 HTML 是这样的：

<div class="checkbox">

    <input data-msg-mustbetrue="You must accept the terms and conditions" data-msg-required="The I aceept the <a href=&quot;#&quot;>terms and conditions</a>. field is required." data-rule-mustbetrue="true" data-rule-required="true" id="TermsAndConditions" name="TermsAndConditions" type="checkbox" value="true">
    <input name="TermsAndConditions" type="hidden" value="false">
    <div class="state">
        <label for="terms">
            I aceept the <a href="#">terms and conditions</a>.
            <span class="field-validation-valid" data-valmsg-for="TermsAndConditions" data-valmsg-replace="false">You must accept the terms and conditions</span>
        </label>
    </div>
</div>

启动验证后，一切正常：

<div class="checkbox">
    <input data-msg-mustbetrue="You must accept the terms and conditions" data-msg-required="The I aceept the <a href=&quot;#&quot;>terms and conditions</a>. field is required." data-rule-mustbetrue="true" data-rule-required="true" id="TermsAndConditions" name="TermsAndConditions" type="checkbox" value="true" class="input-validation-error">
    <input name="TermsAndConditions" type="hidden" value="false">
    <div class="state">
        <label for="terms">
            I aceept the <a href="#">terms and conditions</a>.
            <span class="field-validation-error" data-valmsg-for="TermsAndConditions" data-valmsg-replace="false">You must accept the terms and conditions</span>
        </label>
    </div>
</div>

我已经用这些东西断断续续地用头撞墙了一段时间，谁能给我指出正确的方向？请和谢谢。

Answer 1

我用头撞墙后终于解决了这个问题。

此特定实例是由于缺少 CSS。错误出现在页面上是正常的，它应该从一开始就被隐藏起来。这是唯一使用自定义属性的地方，所以我从来没有想到它会是 CSS，因为所有其他验证都在点上。

span.field-validation-valid {
        display: none;
}

瞧，排序。

在验证之前显示自定义验证属性错误消息

custom validation attribute error message is displaying prior to validation

c#

asp.net-mvc

attributes

html-helper

razor