显示asp-验证.字段更改摘要

Question

使用ASP.NET核心的非突出客户端验证，我希望在字段更改时显示验证摘要，不只是表单提交。

当表单提交时，<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

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

asp-validation-for

• Create是自定义标记助手( asp-clientside-validation-summary )，它是现有asp-validation-summary和asp-validation-for.

的组合。

​

1.重用asp-validation-for

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

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

<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核心进行非突出的客户端验证，我希望在字段更改时显示验证摘要，而不仅仅是表单提交。

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

首先，我们需要将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("");
                }
             }

以下是测试结果：

​

​