Display asp-validation-summary on field change

Question

Using ASP.NET Core unobtrusive client-side validation, I want to display the validation summary when a field changes, not just on form submit.

The <div asp-validation-summary="All"></div> element displays relevant error messages for each field when the form is submitted, but not when the fields are modified (and the modified state is invalid).

Here is my example code:

My model:

public class InviteNewUser
{

    [DisplayName("Email Address")]
    [Required(ErrorMessage = "Please provide the invitee's Email Address")]
    [EmailAddress(ErrorMessage = "Please provide a valid email address")]
    [StringLength(254, ErrorMessage = "Maximum email address length exceeded")]
    public string EmailAddress { get; set; }

}

My form:

@model InviteNewUser

<form data-ajax="true"
      data-ajax-url="@Url.Action("InviteNewUser","Account")"
      data-ajax-method="POST"
      data-ajax-success="success"
      asp-antiforgery="true">

    <div class="form-group">

        <div class="input-group">
            <div class="input-group-prepend ">
                <label class="input-group-text" asp-for="@Model.EmailAddress">Invitee's Email</label>
            </div>
            <input class="form-control" asp-for="@Model.EmailAddress" />
        </div>

    </div>

    <div asp-validation-summary="All" class="text-danger"></div>

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

</form>

@section scripts {

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.js"></script>

    <script>
        function success() {
            alert("Success!");
        }
    </script>

}

My controller:

    [Authorize]
    public class AccountController : Controller
    {
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> InviteNewUser(InviteNewUser viewModel)
        {
            if (!ModelState.IsValid)
            {
               return View("~/Views/MyForm.cshtml",viewModel);
            }
            return Ok();
        }
    }

So if a user types an invalid email (e.g. zero length, or invalid email format) it should show in the validation summary.

Answer 1

I had two ideas when I saw this:

1. Re-use asp-validation-for
2. Create a custom tag helper, asp-clientside-validation-summary, that is kind of the combination of the existing asp-validation-summary and asp-validation-for.

1. Re-use asp-validation-for

This is the simplest way to achieve what you want.

Basically instead of asp-validation-summary, you put each validation message for each field you want to display, generated by asp-validation-for, there and wrap them with a block element. In this way, you don't have to write any custom JavaScript to bind the keyup or change event.

<form asp-area="" asp-controller="user" asp-action="invite"
      data-ajax="true"
      data-ajax-method="POST"
      data-ajax-begin="onBegin"
      data-ajax-complete="onComplete">
    <div class="form-group">
        <label asp-for="EmailAddress"></label>
        <input asp-for="EmailAddress" class="form-control" />
    </div>
    <div class="form-group">
        <label asp-for="DisplayName"></label>
        <input asp-for="DisplayName" class="form-control" />
    </div>
    
    <div class="form-group clientside-validation-summary">
        <span asp-validation-for="EmailAddress" class="text-danger"></span>
        <span asp-validation-for="DisplayName" class="text-danger"></span>
    </div>

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

With a little bit of styles, you can make it look just like a regular list:

.clientside-validation-summary {
    display: flex;
    flex-flow: column nowrap;

    .field-validation-error > span:before {
        content: "*";
        padding-right: .3rem;
    }
}

Result:

Source code is available at: https://github.com/davidliang2008/DL.NetCore.EmptySolution/commit/c41c4a6a641a8dfb4a5ff14bd2c26c089557f993

2. Create custom tag helper

This would be my preferred way. It seems like I can just re-use/inherit from the existing asp-validation-summary, and add data-val-* attribute on each field it finds for the client side validation.

Unfortunately I haven't gotten it working yet (and I am so busy at work...).

I will update this if I can ever get that working.