代码之家 › 专栏 › 技术社区 › Wayne

如何使用ASP.NET Core更改输入字段的客户端验证错误类?

asp.net-core jquery c#

Wayne · 技术社区 · 5 年前

我有一个带有客户端验证的表单,当输入错误时检测到时,将更改输入字段的类属性;将其更改为包括 "input-validation-error" 上课。

我想更改这个类,以便不使用它,而是使用Bootstraps类 "is-invalid" .

我试过使用ASP.NET核心 TagHelpers ,但这没有效果; 我相信这不会起作用,因为helpers只会在加载“整页”时起作用,它无助于客户端验证。

当我在.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 .

0 回复 | 直到 5 年前

Wayne 5 年前

找到一个简单的解决方案将CSS更改侦听器添加到 input 元素; 此示例将侦听器添加到“input”元素,但也可以应用于其他元素。

从这里拿走 jQuery - Fire event if CSS class changed

下面是我的实现,注意我修改了侦听器中的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>