如何从 JavaScript 触发 ASP.NET Core 客户端验证

Question

有什么方法可以从 JavaScript 触发 ASP.NET Core 客户端验证吗？

我有一个带有

<form>

的 Razor Pages 页面，其中包含如下内容：

<div class="row">
    <div class="col-md-6">
        <label asp-for="LocationModel.Location" class="control-label"></label>
        <input asp-for="LocationModel.Location" class="form-control" />
        <span asp-validation-for="LocationModel.Location" class="text-danger"></span>
    </div>
    <div class="col-md-6">
        <label asp-for="LocationModel.LoadsPerMonth" class="control-label"></label>
        <input asp-for="LocationModel.LoadsPerMonth" class="form-control" />
        <span asp-validation-for="LocationModel.LoadsPerMonth" class="text-danger"></span>
    </div>
</div>

如果我提交表单，任何验证错误都会突出显示并显示。有什么方法可以从 JavaScript 触发这个吗？

我实际上并没有将表单提交到服务器。我只想使用 JavaScript 中的值。但如果可以的话，我想使用 ASP.NET Core 验证。我可以看到我可以设置验证文本

<span>

。如果我知道如何像验证那样使控制边框变为红色，也许我可以做到这一点。

我找到了许多执行此操作的示例，但不适用于 ASP.NET Core 或 Razor Pages。

Answer 1

您可以通过不引人注目的验证来做到这一点。为此，您需要包含呈现 jQuery 不引人注目的验证脚本的分部视图。为此，请将以下内容添加到视图底部：

@section Scripts {
    // You can find the partial in ~/Views/Shared
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
}

接下来，作为一个在加载时从 JavaScript 验证表单的愚蠢示例，您可以将

script

添加到同一

Scripts

部分，位于包含部分内容的下方：

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script type="text/javascript">
        $(function () {
            $('#formID').validate();

            if ($('#formID').valid() === true) {
                console.log("valid");
            } else {
                console.log("invalid");
            }
        });
    </script>
}

根据评论更新

@model SiteViewModel

<form asp-action="Index" id="formID" method="post">
    <input asp-for="Name" />
    <span asp-validation-for="Name"></span>
    <input type="submit" />
</form>

@section Scripts {
    @{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script type="text/javascript">
        $(function () {
            $('#formID').validate();

            if ($('#formID').valid() === false) {
                console.log("invalid");
            } else {
                console.log("valid!");
            }
        });
    </script>
}

其中

SiteViewModel

只是：

public class SiteViewModel
{
    [Required]
    public string Name { get; set; }
}

Answer 2

在最新的.Net Core应用程序中，您会在

_ValidationScriptsPartial.cshtml

文件夹中找到

Shared

文件。在所有标签关闭以进行客户端验证之后，在

views (.cshtml)

的最后使用它

@section Scripts{
    @{
       <partial name="_ValidationScriptsPartial"/>
    }
}

Answer 3

SO 已经达到了大多数线程要么已过时，要么不完整的状态。

也就是说，为了保证完整性，你是对的，即使原始答案是正确的，它也不会标记（你必须包括

_ValidationScriptsPartial

）。

我发现它正常工作的唯一方法是在按钮（提交或其他类型）的单击事件处理程序中调用

submit()

：

<input type="submit" click="submitForm" />
...
function submitForm() {
    if ($('#formID').valid()) {
        $('#formID').submit();
    }
    else {
        return false;
    }
}

return false

将有效地导致任何验证错误显示在各自的

asp-validation-for

<span>

中。