asp.net-core - 客户端验证在 ASP.net 核心 MVC 应用程序中不起作用

Question

我正在尝试在 ASP.Net core 3.0 MVC 应用程序中启用客户端验证。当我从 ajax 请求提交表单时，客户端验证不起作用。但是，当我直接发布表单时，它会起作用。这是我的模型：

 public class RegisterViewModel 
    {
      [Required(ErrorMessage = "Please enter first name")]
        [Display(Name = "First Name")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "Please enter last name")]
        [Display(Name = "Last Name")]
        public string LastName { get; set; }
   }

jquery 库的顺序：

  <environment include="Development">
        <link href="~/lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
        <script src="~/lib/jquery/jquery.js"></script>
        <script src="~/lib/jquery-validate/jquery.validate.js"></script>
        <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
    </environment>

表格按钮：

<div class="form-group">
            <input type="button" class="btn btn-primary" value="Register" 
            onclick="accountFormScripts.createAccountRequest()" />
        </div>

我尝试在 configureServcies 下的 Startup.cs 文件中使用添加这一行

services.AddMvc().AddViewOptions(options =>
        {

            options.HtmlHelperOptions.ClientValidationEnabled = true;


        });

但没有运气:(

请指导我，如何在 Ajax 调用上启用客户端验证。

Answer 1

这是一个工作演示，您可以form.valid()像下面这样使用：

<form id="frm" asp-action="AjaxTest" method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
    <label asp-for="FirstName" class="control-label"></label>
    <input asp-for="FirstName" class="form-control" />
    <span asp-validation-for="FirstName" class="text-danger"></span>
</div>
<div class="form-group">
    <label asp-for="LastName" class="control-label"></label>
    <input asp-for="LastName" class="form-control" />
    <span asp-validation-for="LastName" class="text-danger"></span>
</div>
<div class="form-group">
    <input type="button" class="btn btn-primary" value="AjaxTest" onclick="createAccountRequest()" />
    <input type="submit" class="btn btn-primary" value="Register" />
</div>
</form>

@section Scripts
{
 <script>
  function createAccountRequest()
  {
    event.preventDefault();
    var data = $('#frm').serialize();
    var $form = $('#frm');
    if ($form.valid()) {
        $.ajax({
            type: "post",
            url: "/Home/AjaxTest",
            data:data,
            success: function () {
                alert("success!");
            }

        });
    }
    else {
        alert("fail");
    }    
  }
</script>
}

结果：