Unobtrusive Client Validation trong ASP.NET Corre

Trong bài viết này chúng ta sẽ thực hiện validation phía client sử dụng Javascript. Chúng ta đã học cách thực hiện server-side validation ở bài Model Validation. Cơ chế Unobtrusive client-side validation trong ASP.NET Core sử dụng cùng các attribute như với Model Validator.

Client-side validation

Hãy xem xét một ví dụ, khi bạn cần kiểm tra trường Name không được trống. Chúng ta dễ dàng làm với việc thêm attribute Required vào thuộc tính Name trong model.

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

Model Validator sẽ thực hiện kiểm tra trên server và yêu cầu một request gửi tới server. Nó sẽ không tốt cho trải nghiệm người dùng vì phải tốn một khoảng thời gian chờ  trước khi người dùng nhận thông báo lỗi từ server. Nó cũng tốn tài nguyên server cho một kiểm tra đơn giản.

Đây là trường hợp đơn giản nhất của client-side validation.

Client side validation có thể được  thực hiện bằng nhiều cách:

1. Sử dụng các thư viện Javascript như Jquery validation và Javascript Unobtrusive
2. Sử dụng HTML 5 Validation
3. Viết Javascript của bạn

Unobtrusive client-side validation

ASP.NET Core bao gồm các thư viện unobtrusive client-side validation, nó giúp dễ dàng thêm các client-side validation mà không cần viết code nhiều. Trong bài trước chúng ta sử dụng server-side validation, chúng ta cũng tìm hiểu cách sử dụng các attribute Annotation và được xử lý bởi Model Validator để kiểm tra Model. Thư viện unobtrusive client-side cũng sử dụng các attribute đó để kiểm tra các thuộc tính trên phía client. Sự khác nhau là nó sử dụng Javascript thay vì C#.

Unobtrusive (ngầm) validation sử dụng jquery.validate.unobtrusive.js. Thư viện này được xây dựng dựa trên jquery.validate.js, nó sử dụng Jquery. Vì thế chúng ta cần import tất cả nó vào view:

Cách sử dụng unobtrusive client-side validation

Load các thư viện Javascript bắt buộc 

Đầu tiên chúng ta cần thêm JQuery, jquery.validate và jquery.validate.unobtrusive vào view. Các script này được thêm vào file Layout (_Layout.cshtml) định nghĩa layout của ứng dụng và sử dụng chung cho tất cả các view.

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validation.unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>

Thêm Validation Attribute vào thuộc tính input

Tiếp theo chúng ta cần thêm Validation Attribute vào thuộc tính model, cái này đã học trong bài trước. Các attribute này chúng ta thêm khi cài đặt server-side validation cũng được dùng luôn cho client-side validation. Trong view nhớ chỉ ra file layout sử dụng bằng cách:

@{ 
   Layout = "_Layout"; 
}

Model

[Required(AllowEmptyStrings = false, ErrorMessage = "Please enter the name")]
[StringLength(maximumLength: 25, MinimumLength = 10, ErrorMessage = "Length must be between 10 to 25")]
public string Name { get; set; }

View

<form asp-controller="home" asp-action="create" method="post">

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

    <label asp-for="Name"></label>
    <input asp-for="Name"/>
    <span asp-validation-for="Name"></span>
    <br />
    <input type="submit" name="submit" />
</form>

Controller

[HttpPost]
public IActionResult Create(ProductEditModel model, [FromQuery] string test)
{
    string message = "";
    if (ModelState.IsValid){
        message = "product " + model.Name + " created successfully";
    }
    else {
        return View(model);
    }
    return Content(message);
}

Chúng ta không sửa bất cứ code server nào, ngoại trừ thêm các thư viện Javascript

Chúng làm việc ra sao?

Các input tag helper tạo ra HTML như sau:

<label for="Name">Name</label>
<input type="text" data-val="true" data-val-length="Length must be between 10 to 25" data-val-length-max="25" data-val-length-min="10" data-val-required="Please enter the name" id="Name" name="Name" value="" />
<span class="field-validation-valid" data-valmsg-for="Name" data-valmsg-replace="true"></span>
<br />

Bạn có thể thấy các thuộc tính được  thêm vào với ký tự bắt đầu là data-*. Các thuộc tính data-* là một phần của HTML 5 cho phép chúng ta thêm các thông tin mở rộng cho thẻ HTML.

Thư viện Javascript unobtrusive đọc các thuộc tính data-val và thực hiện kiểm tra phía client trên trình duyệt khi người dùng submit form. Các validation này hoàn thành trước khi form được gửi qua HTTP Request. Nếu có validation nào lỗi thì request sẽ không được gửi.

Click F12 và mở cửa sổ Chrome Developer console và xem tab Network. Bạn có thể thấy không có request nào được gửi khi click nút Submit với các dữ liệu không hợp lệ.