输入验证消息不会消失答案

【问题标题】：Input validation message not disappearing输入验证消息不会消失
【发布时间】：2019-01-11 10:13:25
【问题描述】：

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

这是选择前的样子：

这是在做出选择之后：

我的代码：

    <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，它包含在处理验证的捆绑配置中（因此使用的实体框架需要在模型中设置）。

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

    $('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 移除一个类？

【问题讨论】：

能否请您也发布错误元素以及验证表单时如何将上述类附加到它们？
@jom，我更新了问题，谢谢

标签： css bootstrap-4

【解决方案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" )

【讨论】：