表单无效时调用 javascript 函数

Question

我有 PHP (Laravel) 和 Python (Django) 的 Web 框架经验。但是我迷失了 C# 和 ASP.NET!

我正在尝试使用 ASP.NET 核心和 C# 制作登录页面。举个例子，我有一个登录表单，其中包含用户名和密码输入字段：

<div asp-validation-summary="None" class="text-danger"></div>
<label asp-for="Username"></label>
<input asp-for="Username" class="form-control" />
<span asp-validation-for="Username" class="text-danger"></span>

<label asp-for="Password"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>

在我的视图模型中：

[Required(ErrorMessage = "** Localized error message **")]
[Display(Name = "Username:", Prompt = "Username")]
public string Username { get; set; }

[Required(ErrorMessage = "** Another localized error message **")]
[DataType(DataType.Password)]
[Display(Name = "Password:", Prompt = "Password")]
public string Password { get; set; }

一切正常！如果我没有在表单上输入用户名 and/or 密码，本地化的错误消息就会正确显示。但是，如果我提供了一个无效的 username/password，则一般错误（带有 ul、li）会出现在表单顶部。没关系，但我喜欢在原地展示烤面包机，例如：

toastr.error(errorMessageOfInvalidLogin);

如何检查表单在客户端是否有效？我已经包含了 toastr，我可以调用 'manually'。但是我不知道如何仅在表单无效时调用此 javascript，以及如何恢复错误消息。

Answer 1

如果您需要获取 razor 中的值：

您可以删除验证摘要标签：

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

在表单中呈现：

@if (ViewData.ModelState.Any(x => x.Key == string.Empty))
                {
                    var errors = ViewData.ModelState[string.Empty].Errors.Select(e => e.ErrorMessage).Aggregate("", (current, error) => current + error);
                    <input type="hidden" id="error" value="@errors" />
                }

在脚本部分：

<script>

$(function() {
            var error = $("#error").val();
            if (error != undefined) {
                $.toaster({ message: error, title: 'Error', priority: 'danger' });
            }
        })

</script>

想看看吗？ Click here!

Answer 2

不是最佳选择，但我通过以下更改解决了问题：

在css上，输入以下内容（隐藏列表）：

.validation-summary-erros {
  display: none;
}

on Login.cshtml（为每个错误调用一个 toastr）：

<script type="text/javascript">
  $(".validation-summary-erros ul li")
    .each(function() {
      toastr.error($(this).text());
    });
</script>

我还有其他选择，例如：

创建自定义 TagHelper：为此做的工作太多了。
在控制器上，将带有错误的变量传递给 view: 有效，但我更喜欢 AddModelError 选项，因为这是一个错误（验证错误）！

我还在寻找更好的方法！

表单无效时调用 javascript 函数

Call a javascript function when form is not valid

javascript

c#

asp.net-mvc

jquery

unobtrusive-validation