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

Question

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

详细说明：

我有以下属性和属性：

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

（无论出于何种原因。默认为真实是故意的。在视图中它被交换为假）：

@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;
}

瞧，排序。