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

用于删除验证控件中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删除课程？

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" )

输入验证消息不消失

更新

1 个答案: