Как изменить CSS-класс ошибки на стороне клиента для поля ввода, используя ASP.NET Core?

Question

У меня есть форма с проверкой на стороне клиента и при вводе ошибки обнаружен, атрибут класса изменен в поле ввода; Изменено, чтобы включить "input-validation-error" класс.

Я хочу изменить этот класс, чтобы не использовать его, а вместо этого использовать класс Bootstraps "is-invalid".

Я пытался использовать ASP.NET Core TagHelpers, но это не дает никакого эффекта; Я считаю, что это не будет работать, поскольку помощники будут работать только в том случае, если загружена «вся страница», это не поможет при проверке на стороне клиента.

При поиске в проекте .NET обнаруживается класс css, определенный в "Unobtrusive validation support library for jQuery".

Каков наилучший способ изменить этот класс?

Может ли CSS помочь, поменяв класс с одного на другой? (переопределяет исходный класс, не уверен, возможно ли это)

Или нужно использовать JavaScript для перенастройки JQuery?

Вот мой TagHelper, добавляющий помощников: validation-for,validation-error-class,validation-valid-class

Форма / HTML ...

<input type="email" asp-for="Email" id="inputEmail" class="form-control" placeholder="Email address" required
                            validation-for="Email" validation-error-class="is-invalid" validation-valid-class="is-valid"/>
                            <span class="small" asp-validation-for="Email"></span>

Вот фрагмент кода для моего TagHelper.

[HtmlTargetElement("input", Attributes = "validation-for,validation-error-class,validation-valid-class")]
public class ValidationErrorClassTagHelper : TagHelper
{
    [HtmlAttributeName("validation-for")]
    public ModelExpression For { get; set; }

    [HtmlAttributeName("validation-error-class")]
    public string ErrorClass { get; set; }
    [HtmlAttributeName("validation-valid-class")]
    public string ValidClass { get; set; }


    [HtmlAttributeNotBound]
    [ViewContext]
    public ViewContext ViewContext { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.RemoveClass(ErrorClass,HtmlEncoder.Default);
        output.RemoveClass(ValidClass,HtmlEncoder.Default);

        if (ViewContext.ViewData.ModelState.IsValid) {                
            output.AddClass(ValidClass,HtmlEncoder.Default);
        } else 
        {
            output.AddClass(ErrorClass,HtmlEncoder.Default);                
        }          
    }
}

Новый подход не работает на 100%.

Я попробовал альтернативный подход, изменив jQuery defaultOptions, изменив errorClass и validClass.

Фрагмент кода, найденный здесь на [https://github.com/brecons/jquery-validation-unobtrusive-bootstrap][gitHub]

function ($) {
    if($.validator && $.validator.unobtrusive){
        var defaultOptions = {
            validClass: 'is-valid',
            errorClass: 'is-invalid',

Это работает для errorClass, но для меня validClass остается неизменным, осталось назвать valid.

Answer 1

Нашли простое решение!Добавьте слушателя изменения CSS к элементу input;В этом примере добавляется прослушиватель к элементу «input», но он также может применяться к другим элементам.

Взято отсюда jQuery - событие Fire, если класс CSS изменился

Вот моя реализация, обратите внимание, что я изменяю CSS в слушателе, что потенциально может вызвать переполнение стека .

<script type="text/javascript">
// Create a closure
(function() {

    var originalAddClassMethod = jQuery.fn.addClass;

    jQuery.fn.addClass = function() {
        // Execute the original method.
        var result = originalAddClassMethod.apply(this, arguments);

        // trigger a custom event
        // stop recursion...
        if ((arguments[0] != "is-valid") && (arguments[0] != "is-invalid")) {
            jQuery(this).trigger('cssClassChanged');
        }            

        // return the original result
        return result;
    }
})();

// document ready function
$(function() {
    $("input").bind('cssClassChanged', function(){ 
        // cleanup
        if ($(this).hasClass("is-valid")) {
            $(this).removeClass("is-valid");
        }
        if ($(this).hasClass("is-invalid")) {
            $(this).removeClass("is-invalid");
        }

        // remap the css classes to that of BootStrap 
        if ($(this).hasClass("input-validation-error")) {
            $(this).addClass("is-invalid");        
        }

        if ($(this).hasClass("valid")) {
            $(this).addClass("is-valid");        
        }
    });
});
</script>