如何根据客户端验证错误添加和删除 CSS 类？

Question

关于 .net 核心 mvc，如何根据验证错误甚至不同错误之间添加和删除<span asp-validation-for="Input.FirstName">的类？

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

JS 中是否有一种方法可以检查输入错误（自动显示在asp-validation-for="Input.FirstName"下的错误）？

谢谢

Answer 1

如果您想通过不同的错误更改 class。 我认为您不能针对每个错误更改 class。 但我认为最好使用[TempData]并使用特定的跨度，并在该值不为空时显示每个。或 null。对于这种方法，您必须验证您需要什么并为此感觉[TempData] 。

例如：

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>
}

Answer 2

这是一个关于id为Input_FirstName-error的跨度是否有错误信息的演示，向其添加class customClass 。

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

        });

结果：