Сообщение проверки ввода не исчезает

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, поскольку это по всей странице.

---

UPDATE

Используется валидация jquery-validate, она включена в конфигурацию комплекта, которая обрабатывает валидацию (поэтому используемая среда Enitity должна быть установлена ​​в модели).

Пользовательский javascript, который использовался для удаления html-сообщения об ошибке в элементе управления валидацией, был удален, как показано ниже, однако я обнаружил, что удаление класса не работает, поэтому красная полоса по-прежнему отображается.

    $('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" )