My form validates input fields, including textboxes and radio buttons. The validation error messages display correctly when trying to submit the form with incomplete fields. However, once a field has the required data, the validation error should disappear immediately. While the validation messages disappear on textboxes as the user types, they do not disappear for radio button selections.
This is how it appears before selecting:
https://i.sstatic.net/d8bys.png
And after a selection is made:
https://i.sstatic.net/oturt.png
My code is shown below:
<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>
... (additional HTML code) ...
</div>
@Html.ValidationMessageFor(m => m.Address.RiskIsResidence, null, new { @class = "col-lg-12" })
Here is the CSS used for validation styling:
.field-validation-error, .validation-summary-errors,
label.error {
color: #fff;
background-color:#ef425e;
font-size: 12px;
font-family: "Open Sans";
... (additional CSS styles) ...
}
... (more CSS styles) ...
I am looking to remove or make the selected radio button's validation color disappear through CSS. How can I achieve this without affecting other elements on the page?
UPDATE
The form validation is done using jquery-validate, included in the bundle config for handling validation in Entity Framework models. A custom JavaScript function that previously removed the validation error message from the control was found to be ineffective in removing the red strip still displaying.
$('input[type=radio]').on("change", function (e) {
$(this).closest('div.form-group').find(".field-validation-error").html("");
$(this).closest('div.form-group').find(".field-validation-error").remove();
});
How can I successfully remove a class through JavaScript to make the validation error disappear upon selecting a radio button?