c# - 在字段更改时显示 asp-validation-summary

Question

使用 ASP.NET Core 不显眼的客户端验证，我希望在字段更改时显示验证摘要，不仅仅是在表单提交时。

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

这是我的示例代码:

我的模型:

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>

}

我的 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();
        }
    }

因此，如果用户输入无效的电子邮件(例如零长度或无效的电子邮件格式)，它应该显示在验证摘要中。

Answer 1

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

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

1。重用 asp-validation-for

这是实现您想要的目标的最简单方法。

基本上，您可以将由 asp-validation-for 生成的要显示的每个字段的每条验证消息放在那里并换行，而不是 asp-validaiton-summary它们带有 block 元素。这样，您就不必编写任何自定义 JavaScript 来绑定(bind) keyup 或更改事件。

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

通过一些样式，您可以使其看起来像一个常规列表:

.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

2。创建自定义标签助手

这将是我的首选方式。看来我可以从现有的 asp-validation-summary 中重用/继承，并在为客户端找到的每个字段上添加 data-val-* 属性侧面验证。

不幸的是，我还没有让它工作(而且我工作很忙......)。

如果我能做到这一点，我会更新它。