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。错误在页面上是正常现象，一开始就应该将其隐藏。这是唯一使用自定义属性的地方，因此对我来说，这从来没有发生过，因为所有其他验证都可以使用。

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

和瞧，

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

1 个答案: