jquery - .NET Core MVC 中的表单验证

Question

我正在尝试向我的一些字段添加一些表单验证。我有一个下拉菜单和一个输入框。两个输入都需要验证。我的目标是在任何一个无效时向用户显示错误消息。该表单允许用户使用新作者创建现有书籍的副本。下拉列表包含数据库中的书籍列表，用户在文本框中输入新作者的姓名。提交按钮使用新作者创建现有书籍的副本。
使用 jQuery、jquery.validate.js 和 jquery.validate.unobtrusive.js 我能够完成向用户显示错误消息，但检查会在页面加载后立即发生，因此错误消息会在页面加载。 (也许我需要一个隐藏字段，或者我将不得不修改我的 HttpGet 处理程序)。
现在，如果用户尝试提交表单而不选择书籍和/或输入作者姓名，路径保持不变，但表单消失，屏幕上显示一个 json 对象，状态为 400 和它说“书名字段是必需的”和“作者字段是必需的”。我只想要输入字段旁边的红色文本，说明它们不能为空，我该如何实现？谢谢!
我的型号:

public int ID { get; set; }
[Required]
public string bookName { get; set; }
[Required]
public string Author { get; set; }

我的 cshtml:

<form method="post" asp-controller="Index" asp-action="Index" role="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
        <select name="bookName" asp-items="@(new SelectList(ViewBag.message, "ID", "bookName"))">
</select>
        <span asp-validation-for="bookName">Please select a book.</span>
    </div>
    <div class="form-group">
        <label asp-for="Author"></label>
        <input asp-for="Author" class="form-control" />
        <span asp-validation-for="Author">Please type in the author's name.</span>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

我的 Controller :

[HttpGet("[action]")]
[Route("/Index")]
[Produces("application/json")]
public IActionResult Index()
{
  return View();
}

[HttpPost("[action]")]
[Route("/Index")]
[Produces("application/json")]
public async Task<IActionResult> Index([FromForm] bookModel model)
{
  if(ModelState.IsValid)
   {
      //do stuff
      return View(model)
   }
   else
   {
     //display an error message & remain on same page
   }
}

Answer 1

属性 [Produces("application/json")]如果您的 Controller 需要从 View 中返回 html，则不需要。所以这个属性应该被删除。
还有您的验证 span应该有属性 asp-validation-for您有 as-validation-for这不会正确链接验证脚本。
正确的:

<span asp-validation-for="bookName">Please select a book.</span>

修复此问题应该使错误消息仅在输入控件失去焦点后显示。