自定义验证属性不适用于自定义标签助手，仅适用于静态 html

Question

I have been trying to implement this for a while now with no luck. I built a custom tag helper for text boxes in my project and am using it like so:

<text-box asp-for="@Model.PhoneNumber"></text-box>

The issue is I also created a custom validation attribute:

public class InputFormatAttribute : ValidationAttribute, IClientModelValidator
{
    public EInputFormat InputFormat { get; }

    public InputFormatAttribute(EInputFormat format) : base()
    {
        InputFormat = format;
    }

    public void AddValidation(ClientModelValidationContext context)
    {
        string inputMask = "";
        string secondAttribute = "";
        switch (InputFormat)
        {
            case EInputFormat.BranchNumber:
                inputMask = @"'alias': 'GCIS-branch-number'";
                break;
            case EInputFormat.BusinessNumber:
                inputMask = @"'alias': 'GCIS-business-number'";
                break;
            case EInputFormat.DirectDepositAccountNumber:
                inputMask = "'alias': 'GCIS-direct-deposit-account-number'";
                break;
            case EInputFormat.Email:
                secondAttribute = "type = email";
                break;
            case EInputFormat.FullBusinessNumber:
                inputMask = "'alias': 'GCIS-full-business-number'";
                break;
            case EInputFormat.Integer:
                inputMask = "'alias': 'GCIS-integer'";
                break;
            case EInputFormat.InternationalPhoneNumber:
                inputMask = "'alias': 'GCIS-integer'";
                secondAttribute = "type=tel";
                break;
            case EInputFormat.Percentage:
                inputMask = "'alias': 'GCIS-percentage'";
                break;
            case EInputFormat.PhoneNumber:
                inputMask = "'alias': 'GCIS-phone-number'";
                secondAttribute = "data-rule-phoneUS = true";
                break;
            case EInputFormat.PostalCode:
                secondAttribute = "data-rule-postalCodeCA = true";
                break;
            case EInputFormat.SocialInsuranceNumber:
                inputMask = "'alias': 'GCIS-social-insurance-number'";
                secondAttribute = "data-rule-minlength = 9";
                break;
            case EInputFormat.Currency:
                secondAttribute = "'alias': 'currency_en'";
                break;
        }

        if (!inputMask.Equals("")) { MergeAttribute(context.Attributes, "data-inputmask", inputMask); }
        if (!secondAttribute.Equals("")) { MergeAttribute(context.Attributes, secondAttribute, ""); }

    }
    
    bool MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (attributes.ContainsKey(key))
        {
            return false;
        }
        attributes.Add(key, value);
        return true;
    }

   public override bool IsValid(object value)
    {
        //Add more validation on submit...
        return true;
    }

}

The property in the view model using the validation attribute:

[Display(Name = "Telephone number")]    
[InputFormat(EInputFormat.PhoneNumber)]
public string PhoneNumber { get; set; } 

When I use the custom validation attribute WITH the custom tag helper the IClientModelValidator method AddValidation(ClientModelValidationContext context) never gets called and the validation work never gets finished.

However, when I don't use my tag helper and just use static HTML like so:

<label class="control-label" asp-for="Phone"> @*works*@
   <span class="field-name">Phone</span`>`
</label>
<input class="form-control" asp-for="Phone">

The validation attribute methods do run....anyone have an idea of why the attribute class only works with static html and not the tag helper?

Answer 1

The validation attribute methods do run....anyone have an idea of why the attribute class only works with static html and not the tag helper?

Obviously, the text-box is not an officially defined tag, so you need to create it as a custom taghelper to make it the same as the input tag.

In order for the asp-for attribute of the text-box to automatically trigger the verification of the InputFormatAttribute you added to PhoneNumber , the custom taghelper you create needs to inherit from InputTagHelper .

First, create the following MyCustomTagHelper class in your project:

namespace MyProject.CustomTagHelper
{
    [HtmlTargetElement("text-box", Attributes = "asp-for")]
    public class MyCustomTagHelper : InputTagHelper
    {
        public MyCustomTagHelper(IHtmlGenerator htmlGenerator) : base(htmlGenerator) { }
      
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            base.Process(context, output);// the key point
            output.TagName = "input";
            output.Attributes.SetAttribute("class", "form-control");
        }
    }
}

Then, in the Views/_ViewImports.cshtml file, add the following code(here the MyProject is your project name ):

@addTagHelper *, MyProject

Using the text-box tag helper as follow:

<text-box asp-for="@Model.PhoneNumber"></text-box>   

And here is the rendering html of text-box tag helper after loading your view:

<input type="text" data-inputmask="'alias': 'GCIS-phone-number'" data-rule-phoneus="true=&quot;&quot;" id="PhoneNumber" name="PhoneNumber" value="123432" class="form-control">

Here is the debug process :