Krdytkyu

I need to add a specific class to the input if the model is invalid

ValidationErrorClassTagHelper.cs

[HtmlTargetElement("input", Attributes = ValidationForAttributeName + "," + ValidationErrorClassName)]

public class ValidationErrorClassTagHelper : TagHelper

{

    private const string ValidationForAttributeName = "validation-for";



    private const string ValidationErrorClassName = "validationerror-class";



    [HtmlAttributeName(ValidationForAttributeName)]

    public ModelExpression For { get; set; }



    [HtmlAttributeName(ValidationErrorClassName)]

    public string ValidationErrorClass { get; set; }



    [HtmlAttributeNotBound]

    [ViewContext]

    public ViewContext ViewContext { get; set; }



    public override void Process(TagHelperContext context, TagHelperOutput output)

    {

        ViewContext.ViewData.ModelState.TryGetValue(For.Name, out ModelStateEntry entry);

        if (entry != null && entry.Errors.Any())

        {

            output.AddClass(ValidationErrorClass, HtmlEncoder.Default);

        }

    }

}

AccountViewModels.cs

using System.ComponentModel.DataAnnotations;



namespace AccountViewModels

{

    public class LoginViewModel

    {

        [Required]

        [EmailAddress]

        public string Email { get; set; }



        [Required]

        [DataType(DataType.Password)]

        public string Password { get; set; }

    }

}

Login.cshtml

@model LoginViewModel



<form method="post" asp-action="Login">

    <input asp-for="Email" validation-for="Email" validationerror-class="is-invalid"/>  

    <input asp-for="Password" validation-for="Password" validationerror-class="is-invalid"/>    

    <button type="submit" class="btn btn-primary">Login</button>

</form>

Generated html is the email is invalid for example

<input class="input-validation-error is-invalid" type="text" data-val="true" data-val-required="The Email field is required." id="Email" name="Email" value="">

1. Is the good way to do this ?


2. Is there a native way to do that using Asp.Net Core 2?

Have you considered adding style rules to class input-validation-error? It gets added to input element when its value is recognized as invalid.

See live example on .NET Fiddle.

However, if you really need to add your own custom class, take notice that your code only adds custom class to input elements on server side, so that specific class will stay on input elements forever (until next HTTP request). Earlier, I suggested making use of default input-validation-error class, because jQuery validation plugin takes care of removal that class when it discovers the input value as valid. Eventually, you would have to implement same client-side mechanism to remove/add your custom class probably by writing custom jQuery validation script.

Of course, none of above is a real problem if you simply do not care about dynamic client-side validation.