How to add and remove CSS classes based on validation errors on client side?-CodePudding

Regarding .net core mvc, how do I add and remove classes for <span asp-validation-for="Input.FirstName"> based on a validation error or even between different errors?

            <div class="form-group offset-sm-2 col-sm-8">
                <label asp-for="Input.FirstName" class="control-label register-heading-style"></label>
                <input asp-for="Input.FirstName" class="form-control form-control-valid rounded-0" placeholder="John" />
                <span asp-validation-for="Input.FirstName" id="FirstNameError" class="text-danger form-control-invalid invalid-bg"></span>
            </div>

Is there a way in JS perhaps to check for errors on input (the errors that are automatically displayed under asp-validation-for="Input.FirstName")?

Thank you

CodePudding user response：

if you want to change class by different error. I think you can't change class per one error. but i think is better use [TempData] and use specific span and show each one when that value is not empty.or null. for this approach you must validate what you need and feel [TempData] for that.

for example:

if(TempData["error"]!=null)
{
<span>this is an error</span>
}
if(TempData["success"]!=null)
{
<span>this is susccess</span>
}
if(TempData["warning"]!=null)
{
<span>this is warning</span>
}

CodePudding user response：

Here is a demo about if the span which id is Input_FirstName-error has error infomation,add class customClass to it.

$(document).ready(function () {
            $("#FirstNameError").on('DOMSubtreeModified', function () {
                if ($("#Input_FirstName-error").length > 0 && $("#Input_FirstName-error")[0].innerText != "") {
                    $("#Input_FirstName-error").addClass('customClass');
                }
                
            });

        });

result: