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

Posted 2023-04-12

【中文标题】如何根据客户端的验证错误添加和删除 CSS 类？

【英文标题】：How to add and remove CSS classes based on validation errors on client side?

【发布时间】：2021-11-25 18:28:10

【问题描述】：

关于 .net core 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" 下自动显示的错误）？

谢谢

【问题讨论】：

您可以替换IhtmlGenerator 服务，并覆盖GenerateValidationMessage，因为这是从这里调用的； github.com/dotnet/aspnetcore/blob/main/src/Mvc/Mvc.TagHelpers/…。虽然看起来你可以控制 css 类名 (github.com/dotnet/aspnetcore/blob/…)

【参考方案1】：

如果您想通过不同的错误更改课程。我认为你不能每一个错误就改变班级。但我认为最好使用[TempData] 并使用特定的跨度并在该值不为空或为空时显示每个跨度。对于这种方法，您必须验证您的需求并为此感到[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>

【讨论】：

当用户输入更改触发错误时，我将如何获得 TempData？

我最好的解决方案是按键生成跨度值。例如：在控制器端返回“VALID-E”，在您的前端设置一个 eventLisener，当获取跨度值中的那个键时，用您自己的 Sentence 和您想要的自己的类进行更改。

【参考方案2】：

这是一个关于id为Input_FirstName-error的span是否有错误信息的演示，添加类customClass。

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

        );

结果：