css - 输入验证消息不消失

Question

我有一个表单可以验证输入字段，包括文本框和单选按钮。当尝试提交表单并且字段尚未完成时，验证错误消息会正确显示。当一个字段具有所需的数据时，它需要验证错误应该立即消失。当用户键入时，验证消息会在文本框中消失。但是，在单选按钮上选择一个选项时，验证消息(或该字段的背景颜色)不会消失。

这是选择之前的样子:

这是在做出选择之后:

我的代码:

    <div class="form-group">
        <label class="col-lg-12 control-label label-input">
            Is this also your residence address?
            <a tabindex="-1" data-toggle="popover" data-placement="bottom" class="popover-dismiss" rel="popover" data-content="We may need to send some policy and claim documents to you via mail.">
                <img src="~/Images/svg/Icon Info.svg" height="16" width="16" />
            </a>
        </label>
        @*@Html.LabelFor(m => m.Address.RiskIsResidence, new {@class = "col-lg-12 control-label label-input"})*@
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div data-toggle="buttons">
                <label class="btn btn-radio">
                    @Html.RadioButtonFor(m => m.Address.RiskIsResidence, "Yes", new { name = "radIsResidence" }) Yes
                </label>

                <label class="btn btn-radio">
                    @Html.RadioButtonFor(m => m.Address.RiskIsResidence, "No", new { name = "radIsResidence" }) No
                </label>
            </div>
        </div>

        @Html.ValidationMessageFor(m => m.Address.RiskIsResidence, null, new { @class = "col-lg-12" })
    </div>

我用于验证的 CSS:

    .field-validation-error, .validation-summary-errors,
     label.error {
     color: #fff;
     background-color:#ef425e;
     font-size: 12px;
     font-family: "Open Sans";
     font-style: normal;
     font-stretch: normal;
     line-height: normal;
     letter-spacing: normal;
     padding:8px 10px;
     margin:3px 0;
     width:100%;
     display:inline-block;
     }

     .input-validation-error, input-validation-errors,
     input.error {
     border: 2px solid #ef425e;
     padding:7px;
     }

    .input-validation-error:focus {
     border: 1px solid #ef425e;
     background-color: #FFFFFF;
     padding:7px;
     /*box-shadow: inset 0 -3px 0 0 red;*/
     }

在选择单选按钮时如何去除颜色或使其消失？最好我想在 css 中执行此操作，因为这是跨所有页面的。

---

更新

使用的验证是 jquery-validate，它包含在处理验证的 bundle 配置中(因此需要在模型中设置 Entity Framework )。

用于删除验证控件中的 html 错误消息的自定义 javascript 已如下删除，但是我发现删除类不起作用，因此红色 strip 仍然显示。

    $('input[type=radio]').on("change", function (e) {
    //$(this).trigger('reset.unobtrusiveValidation');
    $(this).closest('div.form-group').find(".field-validation-error").html("");
    $(this).closest('div.form-group').find(".field-validation-error").remove();

});

如何通过JS删除类？

Answer 1

错误框仍然可见的原因，在你删除它的内容后，是因为你添加了padding: 7px，因此该元素将始终可见。

因此，为了删除类和样式，您可以这样做。

$(this).closest('div.form-group').find(".field-validation-error").removeClass("field-validation-error")

但这意味着如果用户将值更改为不正确的值，您将无法再次向其中添加内容，因为您删除了该类。 因此，您应该添加一个类似 errorHide 的类，然后使用它来切换元素的样式。

使用 .errorHide 来指定何时应该添加样式

.field-validation-error.errorShow.errorHide{
    display:none;
}

然后您可以使用 jquery 切换它，并确保它仅在您需要时可见。

$(this).closest('div.form-group').find(".field-validation-error").toggleClass( "errorHide" )