在字段更改时显示 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>

}

我的控制器：

    [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-validation-for 的组合。

1.重复使用asp-validation-for

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

基本上不是asp-validaiton-summary，而是将asp-validation-for生成的每个要显示的字段的每个验证消息放在那里，并用块元素包装它们。这样，您不必编写任何自定义 JavaScript 来绑定 keyup 或 change 事件。

<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-* 属性。

不幸的是，我还没有开始工作（而且我工作很忙......）。

如果我可以让它工作，我会更新这个。

Answer 2

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

这可以通过在js中判断$("form").valid()来实现。

首先，我们需要在input中添加一个onkeyup事件来触发验证。

 <input class="form-control" asp-for="@Model.EmailAddress" onkeyup="validateEmail()" />

然后，在js中添加validateEmail函数判断表单验证是否有效。

如果无效，验证摘要会自动显示相应的错误信息，否则，我们需要手动删除验证摘要div中的错误信息。

            function validateEmail() {
                if ($("form").valid()) {
                    $("form").find(".validation-summary-errors").html("");
                }
             }

这是测试结果：