Jquery NET核心MVC中的表单验证

我正在尝试向我的一些字段添加一些表单验证。我有一个下拉列表和一个输入框。这两种输入都需要验证。我的目标是在其中任何一条无效时向用户显示一条错误消息。表单允许用户与新作者一起创建现有书籍的副本。下拉列表包含数据库中的书籍列表，用户在文本框中键入新作者的姓名。“提交”按钮将创建现有书籍的副本，其中包含新作者

使用jQuery、jQuery.validate.js和jQuery.validate.unobtrusive.js，我能够向用户显示错误消息，但检查会在页面加载后立即进行，因此页面加载后错误消息会立即出现。（可能我需要一个隐藏字段，或者我必须修改我的HttpGet处理程序）

现在，如果用户试图提交表单而不选择书籍和/或键入作者姓名，则路径保持不变，但表单会消失，屏幕上会显示一个json对象，状态为400，并显示“bookName字段是必需的”和“author字段是必需的”。我只希望输入字段旁边有红色文本，表示不能为空，我如何才能做到这一点？谢谢

我的模型：

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>

请选择一本书。
请输入作者的姓名。

我的控制器：

[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
   }
}

public class BookController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.message = addMessage();

            return View();
        }
       [HttpPost]
        public ActionResult Index(bookModel model) {
            ViewBag.message = addMessage();
            return View();
        }
        public static List<SelectListItem> addMessage() {
            List<SelectListItem> list = new List<SelectListItem>();
            SelectListItem s1 = new SelectListItem { Text = "book1", Value = "b1" };
            SelectListItem s2 = new SelectListItem { Text = "book2", Value = "b2" };
            SelectListItem s3 = new SelectListItem { Text = "book3", Value = "b3" };
            list.Add(s1);
            list.Add(s2);
            list.Add(s3);
            return list;
        }

       
    }

[HttpGet（“[action]”）
[路线（“/索引”）]
[产生（“应用程序/json”）]
公共IActionResult索引（）
{
返回视图（）；
}
[HttpPost（“[行动]”）]
[路线（“/索引”）]
[产生（“应用程序/json”）]
公共异步任务索引（[FromForm]bookModel）
{
if（ModelState.IsValid）
{
//做事
返回视图（模型）
}
其他的
{
//显示错误消息并保持在同一页上
}
}

如果希望控制器从视图返回html，则不需要属性

[products（“application/json”）]

。所以这个属性应该被删除

此外，您的验证

span

应具有属性

asp validation for

您的

as validation for

将无法正确链接验证脚本

正确：

请选择一本书。

---

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

是否表示单击按钮时要显示验证消息？如果是，您可以在模型中更改错误消息，并删除

中的消息以下是演示：

型号：

public class bookModel
    {
        public int ID { get; set; }
        [Required(ErrorMessage = "Please select a book.")]
        public string bookName { get; set; }
        [Required(ErrorMessage = "Please type in the author's name.")]
        public string Author { get; set; }
    }

控制器：

[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
   }
}

public class BookController : Controller
    {
        public ActionResult Index()
        {
            ViewBag.message = addMessage();

            return View();
        }
       [HttpPost]
        public ActionResult Index(bookModel model) {
            ViewBag.message = addMessage();
            return View();
        }
        public static List<SelectListItem> addMessage() {
            List<SelectListItem> list = new List<SelectListItem>();
            SelectListItem s1 = new SelectListItem { Text = "book1", Value = "b1" };
            SelectListItem s2 = new SelectListItem { Text = "book2", Value = "b2" };
            SelectListItem s3 = new SelectListItem { Text = "book3", Value = "b3" };
            list.Add(s1);
            list.Add(s2);
            list.Add(s3);
            return list;
        }

       
    }

公共类BookController:控制器
{
公共行动结果索引（）
{
ViewBag.message=addMessage（）；
返回视图（）；
}
[HttpPost]
公共行动结果索引（bookModel）{
ViewBag.message=addMessage（）；
返回视图（）；
}
公共静态列表addMessage（）{
列表=新列表（）；
SelectListItems1=新建SelectListItem{Text=“book1”，Value=“b1”}；
SelectListItem s2=新建SelectListItem{Text=“book2”，Value=“b2”}；
SelectListItems3=新建SelectListItem{Text=“book3”，Value=“b3”}；
列表。添加（s1）；
列表。添加（s2）；
增加（s3）；
退货清单；
}
}

视图：

@{
ViewData[“标题”]=“索引”；
}
@模型书模型
指数

结果:

---

我建议使用名为FormHelper的外部库。在ASP.NET Core上创建表单和进行验证非常容易。您不需要为ajax表单编写javascript代码。只需将asp formhelper=“true”属性添加到表单标记中

您可以从github页面查看其文档：

---

试过这个吗

if（！ModelState.IsValid）{return Page（）；}

@naveen-Hi，感谢您的回复！我正在为此应用程序使用MVC，因此我的应用程序没有cshtml.cs代码。如果我没弄错的话，我不能返回页面，只能返回浏览量。嗨，罗斯科，谢谢你的回复！我将进一步研究products属性。我删除了该属性，但如果我尝试提交表单时没有填写下拉框和输入框，我仍然会得到json对象作为响应。有什么建议可以解释为什么会这样吗？在我的模型中添加必需的属性似乎会让一切都变得不那么顺利。如果存在必需的属性，则我的HttpPost不起作用。