显示关于字段更改的ASP验证摘要 [英] Display asp-validation-summary on field change

问题描述

我使用ASP.NET Core的客户端验证，当字段更改时，我想显示验证摘要，而不仅限于表单提交.

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

<div asp-validation-summary="All"></div>元素在提交表单时为每个字段显示相关的错误消息，但在修改字段时(修改后的状态无效)则不显示.

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).

这是我的示例代码:

我的模特:

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; }

}

我的表单:

@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>

}

我的控制器:

    [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.

推荐答案

当我看到这个时，我有两个想法:

I had two ideas when I saw this:

1. 重复使用asp-validation-for
2. 创建一个自定义标签帮助程序asp-clientside-validation-summary，它是现有asp-validation-summary和asp-validation-for的组合.

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.重复使用asp-validation-for

这是实现所需目标的最简单方法.

1. Re-use asp-validation-for

This is the simplest way to achieve what you want.

基本上而不是asp-validaiton-summary，而是将要显示的每个字段的每个验证消息放置在其中，并由asp-validation-for生成，并用block元素包装它们.这样，您无需编写任何自定义JavaScript即可绑定keyup或change事件.

Basically instead of asp-validaiton-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 styles, you can make it look like a regular list:

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

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

结果:

可在以下位置获取源代码: https://github.com/davidliang2008/DL.NetCore.EmptySolution/commit/c41c4a6a641a8dfb4a5ff14bd2c26c089557f993

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

这是我的首选方式.似乎我可以重新使用/继承现有的asp-validation-summary，并在找到的每个字段上添加data-val-*属性，以进行客户端验证.

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.

这篇关于显示关于字段更改的ASP验证摘要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！