如何从JavaScript触发ASP.NET Core客户端验证 每个评论的更新

如何解决如何从JavaScript触发ASP.NET Core客户端验证 每个评论的更新

是否可以通过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。

解决方法

您可以通过不打扰的验证来做到这一点。为此，您需要包括呈现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; }
}