Kiểm tra tính hợp lệ của Form trong HTML5 (HTML5 Form Validation)

Trong hướng dẫn này, chúng ta sẽ khám phá thuộc tính pattern của HTML, sử dụng nó để giúp chúng ta tùy biến cách chúng ta kiểm tra tính hợp lệ của form.

Kiểm tra tính hợp lệ của Form có tầm quan trọng đối với một trang web bảo mật cũng như tính khả dụng của nó. Quá trình xác nhận đánh giá các giá trị đầu vào có đúng định dạng hay không trước khi gửi nó. Ví dụ, nếu chúng ta có một trường nhập liệu cho một địa chỉ email, thì giá trị chắc chắn phải có một địa chỉ email hợp lệ; nó nên bắt đầu bằng một ký tự hoặc một số, tiếp theo là biểu tượng @, sau đó kết thúc với một tên miền.

Đặc tả HTML5 làm cho việc xác nhận trở nên dễ dàng hơn với sự ra đời của các kiểu trường nhập liệu mới chẳng hạn như emailurl, và tel, và chúng cũng đi kèm với quy tắt kiểm tra được định nghĩa trước. Bất cứ khi nào giá trị cho trước không đáp ứng với các định dạng bắt buộc, thì các trường nhập liệu này sẽ đưa ra một thông báo lỗi, từ đó ngăn chặn việc gởi dữ liệu đi.

Invalid email address error message
Thông báo lỗi trong địa chỉ email không hợp lệ (Chrome)

Tuy nhiên, kỳ vọng mỗi trường hợp đầu vào đều được cung cấp khả năng kiểm tra là không thực tế. Nếu bạn có một tên người dùng, mã zip hoặc bất kỳ loại dữ liệu đặc biệt không được chỉ định như là kiểu đầu vào tiêu chuẩn thì sao? Làm thế nào chúng ta xác nhận đầu vào chúng? Đây là nơi mà thuộc tính patternphát huy tác dụng.

Thuộc tính pattern này chỉ áp dụng trên các phần tử input. Nó cho phép chúng ta xác định quy tắc kiểm tra giá trị đầu vào riêng của chúng ta bằng cách sử dụng Regular Expressions (RegEx). Một lần nữa, nếu giá trị không khớp với mẫu đã chỉ định, thì phần tử input sẽ đưa ra một lỗi.

Ví dụ, giả sử chúng ta có một input tên người dùng trong form của chúng ta. Không có một loại tiêu chuẩn cho tên người dùng, do đó chúng ta sử dụng text input thông thường:

Hãy định nghĩa một quy tắc để sử dụng với thuộc tính pattern. Trong trường hợp này, chúng ta sẽ chỉ ra rằng tên người dùng chỉ nên bao gồm chữ thường; chữ hoa, số hoặc ký tự đặc biệt khác đều được phép. Ngoài ra, chiều dài tên người dùng không nên có nhiều hơn 15 ký tự. Trong RegEx, quy tắc này có thể được biểu diễn như sau [a-z]{1,15}.

Thêm [a-z]{1,15} như là giá trị của thuộc tính pattern trong input tên người dùng của chúng ta:

Bây giờ, vì nó chỉ chấp nhận chữ thường, nên khi submit bất kỳ giá trị nào khác sẽ đưa một thông báo lỗi:

The error message stating the pattern is not matched
Thông báo lỗi, phát biểu rằng giá trị nhập vào không trùng với mẫu.

Như bạn thấy ở trên, thông báo lỗi nói “Please match the requested format.” Xác nhận của chúng ta hoạt động, nhưng thông báo này không giúp người dùng của chúng ta hiểu được mẫu được yêu cầu thực sự là gì. UX thất bại.

May mắn thay, chúng ta có thể tùy biến thông báo để cho nó trở nên hữu ích hơn, và chúng ta có một vài cách để làm như vậy. Cách dễ nhất là chỉ định một thuộc tính title bên trong phần tử input của chúng ta:

Bây giờ title được thêm vào trong cùng với thông báo mặc định:

Tuy nhiên, thông báo bật lên là không đồng nhất. Nếu chúng ta so sánh nó với một trong những thông báo bởi kiểu input email được hiển thị trước đó, thì các chỉ dẫn thật sự có thể nổi bật hơn.

Cách thứ hai sẽ giải quyết vấn đề này cho chúng ta.

Bây giờ hãy thay thế thông báo “Please match the requested format” mặc định bằng một thông báo hoàn toàn tùy biến. Chúng ta sẽ sử dụng một chút JavaScript để làm điều này.

Bắt đầu bằng cách thêm một id vào phần tử input, để có thể chọn nó được thuận tiện hơn.

Bây giờ, chúng ta có thể chọn phần tử input bằng cách sử dụng JavaScript và gán nó cho một biến (hoặc giữa các thẻ <script> trên trang của chúng ta, hoặc trong một tập tin JavaScript riêng, hoặc trong cửa sổ JS trên CodePen):

Cuối cùng, chúng ta chỉ định thông báo được sử dụng khi input hiển thị trạng thái không hợp lệ của nó.

Sự kiện oninvalid kế thừa một đối tượng event chứa một vài thuộc tính, bao gồm target (phần tửu không hợp lệ) và validationMessage chứa thông báo lỗi. Trong ví dụ trên, chúng ta đã thay thế thông báo bằng cách sử dụng phương thức setCustomValidity().

Bây giờ, chúng ta sẽ thấy thông báo tuỳ biến thay thế cái mặc định.

Để bổ sung cho kiểu input mới và những phương thức này để thiết lập một thông báo xác nhận tuỳ biến, đặc tả CSS3 mang đến một vài lớp giả hữu ích, :valid và :invalid. Những cái này cho phép chúng ta áp dụng phong cách tùy thuộc vào trạng thái xác nhận của input, ví dụ:

Có một số thứ cần lưu ý khi sử dụng các lớp giả:

  • Đầu tiên, :valid được áp dụng mặc định, ngay cả khi giá trị input là rỗng. Vì vậy, như bạn có thể nhìn thấy ở trên, chúng ta đặt border-color #ccc; màu mặc định cho phần tử input của chúng ta. Giá trị rỗng luôn luôn được xem là hợp lệ, trừ khi chúng ta thêm thuộc tính required. Trong trường hợp đó, input là không hợp lệ và viền màu đỏ được đưa ra.
  • Các phong cách cho hợp lệ và không hợp lệ áp dụng ngay lập tức khi người dùng đang gõ, ngay cả khi giá trị là rỗng. Việc thay đổi phong cách ngay lập tức có thể khiến người dùng bối rối.

Xác nhận form đã trở thành một tiêu chuẩn mới sau mỗi một đặc tả HTML5, nhưng các popup lỗi xuất hiện hoàn toàn tuỳ thuộc vào các nhà cung cấp trình duyệt thì như thế nào. Kỳ vọng cái đẹp khác nhau trong các trình duyệt khác nhau, sẽ không giúp tạo ra sự thống nhất của giao diện người dùng.

Google Chrome ngăn chặn khả năng tùy biến phong cách popup mặc định cách đây một vài năm. Nếu điều này là cái mà bạn muốn đạt được, lựa chọn duy nhất còn lại là hoàn toàn có thể thay thế thông báo popup bằng cách sử dụng JavaScript, vì vậy, hãy xem nó làm việc như thế nào!

Chúng ta sẽ tạo một popup tùy biến mà sẽ xuất hiện khi giá trị của input là không hợp lệ. Để bắt đầu, chúng ta cần chọn một vài phần tử cần thiết, cụ thể là input và form:

Tiếp theo, chúng ta sẽ tạo ra một phần tử mới mà sẽ chứa thông báo của chúng ta:

Ở đây, chúng tôi tạo ra một phần tử div mới. Chúng tôi gán cho nó một id là notify, và ẩn nó bằng cách thiết lập thuộc tính display thành none. Cuối cùng, chúng ta thêm div mới vào bên trong form.

Có hai sự kiện chúng ta cần phải xử lý. Đầu tiên, sự kiện invalid được gọi khi giá trị của input không khớp với mẫu. Chúng ta sẽ chạy code sau đây bên trong sự kiện invalid:

Ở đây, với event.preventDefault(); chúng ta bỏ hành vi mặc định để cho thông báo popup mặc định của trình duyệt không xuất hiện. Thay vào đó, chúng ta sẽ hiển thị thông báo riêng thông qua phần tử div mới của chúng ta. Chúng ta thêm thông báo bên trong nội dung, thêm một lớp mới, error và hiển thị thông báo bằng cách thiết lập thuộc tính display thành block.

Chúng ta cũng thêm một lớp, invalid, vào phần tử input, cho nó viền màu đỏ. Chúng ta cũng cần phải thiết lập quy tắc phong cách trong CSS stylesheet.

Ngoài ra, bạn cũng có thể thêm các lớp animated shake từ Animate.css. Điều này cung cấp cho nó một hiệu ứng đặc biệt bằng cách sử dụng hiệu ứng shake (lắc).

Sự kiện thứ hai là sự kiện input. Sự kiện này được gọi khi giá trị của input thay đổi. Chúng ta sẽ sử dụng sự kiện này chuyển trạng thái của input về lại bình thường, cũng như ẩn popup thông báo, như sau.

Như bạn có thể thấy ở trên, chúng ta sẽ loại bỏ tên lớp khỏi phần tử input và ẩn popup thông báo.

Bây giờ chúng ta đã có một thông báo xác nhận hoàn toàn tùy biến. Hãy thử nó: nhập bất kỳ giá trị không hợp lệ:

Lưu ý: Đừng quên ghé qua GraphicRiver nếu bạn đang tìm kiếm cảm hứng để thiết kế giao diện form.

Sử dụng kiểu input tiêu chuẩn cùng với thuộc tính pattern sẽ cung cấp cho form của bạn một lớp xác nhận, nhưng lưu ý rằng bạn nên thực hiện một số kiểu xác nhận trên máy chủ.

Ngạc nhiên là, ngay cả khi người dùng đã vô hiệu hóa JavaScript trong trình duyệt, thì trình duyệt mới nhất sẽ vẫn hiển thị popup xác nhận và ngăn chặn việc submit form. Tuy nhiên, Safari, không hỗ trợ thuộc tính pattern tại thời điểm viết bài. Tính năng tương tự có thể được chèn vào bằng cách sử dụng một polyfill Webshim Lib.

Tôi hy vọng bạn thích hướng dẫn này và giữ nó như là một tài liệu tham khảo tiện dụng cho việc xác nhận bằng HTML5.