Xác thực biểu mẫu trong .NET Core MVC

Tôi đang cố gắng thêm một số xác thực biểu mẫu vào một vài trường của mình. Tôi có một danh sách thả xuống và một hộp nhập liệu. Cả hai đầu vào đều cần xác nhận. Mục tiêu của tôi là hiển thị thông báo lỗi cho người dùng nếu một trong hai lỗi không hợp lệ. Biểu mẫu cho phép người dùng tạo bản sao của một cuốn sách hiện có với một tác giả mới. Menu thả xuống có danh sách các sách từ cơ sở dữ liệu và người dùng nhập tên của Tác giả mới vào hộp văn bản. Nút gửi tạo bản sao của sách hiện có với tác giả mới.

Bằng cách sử dụng jQuery, jquery.validate.js và jquery.validate.unobtrusing.js, tôi đã có thể hoàn thành việc hiển thị thông báo lỗi cho người dùng, nhưng việc kiểm tra diễn ra ngay khi tải trang, vì vậy thông báo lỗi sẽ xuất hiện ngay khi tải trang. (Có thể tôi sẽ cần một trường ẩn hoặc tôi sẽ phải sửa đổi trình xử lý HttpGet của mình).

Ngay bây giờ nếu người dùng cố gắng gửi biểu mẫu mà không chọn sách và / hoặc nhập tên tác giả, tuyến đường vẫn giữ nguyên, nhưng biểu mẫu biến mất và có một đối tượng json hiển thị trên màn hình với trạng thái 400 và nó cho biết "Trường tên sách là bắt buộc" và "Trường tác giả là bắt buộc". Tôi chỉ muốn văn bản màu đỏ bên cạnh các trường nhập cho biết chúng không được để trống, làm cách nào tôi có thể thực hiện điều này? Cảm ơn!

Mô hình của tôi:

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

Cshtml của tôi:

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

Bộ điều khiển của tôi:

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

Thuộc tính [Produces("application/json")]này không cần thiết nếu bộ điều khiển của bạn được mong đợi trả về html từ chế độ xem. Vì vậy, thuộc tính này nên được loại bỏ.

Ngoài ra, xác thực của bạn spanphải có thuộc tính asp-validation-forBạn có as-validation-for, thuộc tính này sẽ không liên kết chính xác tập lệnh xác thực.

Chính xác:

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

Việc khắc phục điều này sẽ làm cho các thông báo lỗi chỉ hiển thị sau khi điều khiển đầu vào bị mất tiêu điểm.

Bạn có muốn hiển thị thông báo xác thực khi nhấp vào nút không? Nếu vậy, bạn có thể thay đổi thông báo lỗi trong Mô hình và xóa thông báo trong <span asp-validation-for=xxx></span>Đây là bản trình diễn đã hoạt động:

Mô hình:

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

Bộ điều khiển:

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

       
    }

Lượt xem:

@{
    ViewData["Title"] = "Index";
}
@model bookModel
<h1>Index</h1>
<form method="post">
    <div class="form-group">
        <label asp-for="bookName"></label>
        <select asp-for="bookName" asp-items="@ViewBag.message"></select>
        <span asp-validation-for="bookName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Author"></label>
        <input asp-for="Author" class="form-control" />
        <span asp-validation-for="Author" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Submit" class="btn btn-primary" />
    </div>
</form>

Kết quả: