Validation Tag Helper trong ASP.NET Core

ASP.NET cung cấp các Tag Helper liên quan đến hiển thị validation message cho người dùng. Chúng ta đã tìm hiểu cách sử dụng server-side model validation trong bài trước. Model Binder sẽ bind và kiểm tra dữ liệu nhận từ HTTP Request. Nó tạo một đối tượng ModelState chứa các danh sách thông báo lỗi được tạo ra bởi Model Binder. Validation Tag Helper sẽ tạo ra các phần tử HTML để hiển thị cho user trên view.

Validation Tag Helpers

ASP.NET Core cung cấp 2 Tag Helper để hiển thị thông báo lỗi trên client:

1. Validation Message Tag Helper
2. Validation Summary Tag Helper

Validation Message Tag Helper

Validation Tag Helper hướng đến phần tử <span> và sử dụng nó để thiển thị một thông báo lỗi cho thuộc tính cụ thể.

[Required]
Public string name {get;set;}

<label asp-for="Name">Name</label>
<input asp-for="Name" />
<span asp-validation-for="Name"></span>
<br />

Đoạn HTML sau được tạo ra. Chú ý là phần tử <span> rỗng và class field-validation-valid được gắn cho nó.

<label for="Name">Name</label>
<input type="text" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>

Và khi bạn gửi form với một trường name bị rỗng. Đoạn HTML được tạo ra chú ý là phần tử <span> giờ đã có thông tin lỗi. Và class field-validation-error được gắn cho nó.

<label for="Name">Name</label>
<input type="text" class="input-validation-error" data-val="true" data-val-required="The Name field is required." id="Name" name="Name" value="" />
<span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true">The Name field is required.</span>

Class dưới đây hiển thị màu đỏ cho class lỗi:

<style>
    .field-validation-error { color:red }
</style>

Validation Summary Tag Helper

Validation summary tag helper hướng đến phần tử <div> và dùng nó để hiển thị tất cả các thông tin lỗi trên form ở một nơi. Mỗi một thông báo lỗi được hiển thị với một danh sách không được sắp xếp. Bạn cần chỉ ra 3 giá trị cho asp-validation-summary tag helper. All, ModelOnly hoặc None.

All

Tuỳ chọn này hiển thị tất cả các thông báo lỗi

<div asp-validation-summary="All"></div>

Nó sẽ tạo ra đoạn HTML dưới đây khi không có lỗi nào được hiển thị

<div class="validation-summary-valid" data-valmsg-summary="true">
  <ul><li style="display:none"></li></ul>
</div>

Và tạo ra HTML khi model lỗi:

<div class="validation-summary-errors" data-valmsg-summary="true">
    <ul><li>The Name field is required.</li></ul>
</div>

Để hiển thị tiêu đề

<div asp-validation-summary="All">
    <span>Please correct the following errors</span>
</div>

Và thêm style:

.validation-summary-valid span { display: none; }

ModelOnly

Tuỳ chọn này hiển thị chỉ các lỗi liên quan đến validation mức Model. Các lỗi ở level thuộc tính sẽ không hiển thị. Sử dụng tuỳ chọn này nếu bạn đang hiển thị các lỗi validation liên quan đến thuộc tính sử dụng asp-validation-for.

<div asp-validation-summary="ModelOnly"></div>

Điều lạ nữa là nó không tạo ra bất cứ HTML nào khác biệt, khi ModelState hợp lệ không giống như tuỳ chọn All.

Bạn có thể thêm lỗi mức độ Model trực tiếp trong Model sử dụng

ModelState.AddModelError(string.Empty, "Errors occurred in the Model");

Đoạn HTML dưới được tạo ra khi lỗi xảy ra:

<div class="validation-summary-errors">
    <ul><li>Errors occurred in the Model</li></ul>
</div>

None

Tag Helper sẽ không hiển thị bất cứ lỗi nào, cái này giống như không có Tag Helper.

Chú ý là validation-summary-valid class được thêm vào khi model hợp lệ (không phải khi tuỳ chọn "All" được chọn) và nó được thay thế bởi validation-summary-errors khi model không hợp lệ.

Thêm các style để thay đổi màu chữ:

<style>
    .validation-summary-errors { color:red }
</style>

Bạn có thể hiển thị tiêu đề của thông báo lỗi

<div asp-validation-summary="ModelOnly">
    <span>Please correct the following errors</span>
</div>

Tiêu đề được hiển thị chỉ khi lỗi được hiển thị.