Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Form Design

Làm Thế Nào Để Tạo Các Nhãn Di Chuyển Với Trình Xác Nhận Của HTML5 (HTML5 Validation)

by
Difficulty:IntermediateLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

TL; DR Thay thế trình xác nhận bằng JavaScript của bạn bằng trình xác nhận của HTML5. Nó dễ dàng hơn bạn tưởng đấy, và nó sẽ cung cấp cho bạn một đống cách markup và điều khiển cách hiển thị của chúng. Hãy xem qua demo này:

Những Gì Chúng Ta Đang Làm Ở Đây

Vậy là bạn cần để xác minh một form đúng hay không. Bạn làm những việc cần thiết và bắt đầu với trình xác minh bên phía máy chủ (server-side). Sau đó, nếu bạn là một nhà thiết kế web giỏi, bạn sẽ thêm vào một số trình xác minh bên phía khách hàng để người dùng của bạn nhận được phản hồi về việc họ điền biểu mẫu chính xác hay không. Nếu bạn là một nhà thiết kế web thực sự giỏi, thậm chí bạn có thể làm cho thông tin phản hồi ngay lập tức, do đó người dùng sẽ có thể nhận thức được rằng họ đã nhập đúng ngay khi họ nhập một địa chỉ email hợp lệ.

Bạn sẽ phải đụng đến thư viện jQuery yêu thích của bạn. Có lẽ bạn thậm chí còn ngầu tới mức chỉ cần sử dụng một thư viện JavaScript nguyên gốc.

Bạn thêm vào đó một số markup bổ sung. Thiết kế lại vài thứ... thêm vào các luật (rule) cho việc xác minh bằng JavaScript. Kết nối JavaScript đến máy chủ (server) thông qua AJAX. Bạn dọng đầu minh vào bàn phím một vài phát bởi vì bạn đã không thể làm xong những việc này trong một vài tháng và bạn phải tìm hiểu chính xác là làm thế nào mà trình xác minh mới của thư viện JavaScript làm được những điều này... Và rồi cứ thế, cứ thế.

Bạn sẽ nhận được tấm hình. Nó không vui tí nào.

Nếu như bạn có thể bỏ qua tất cả những thứ JavaScript đó và chỉ cần xác minh bằng các thuộc tính xác minh của HTML5 và CSS thì sao?

Trình Xác Minh Của Form Của HTML5 Là Gì?

Dựa trên điều kiện cơ bản: bạn thêm các thuộc tính như required hoặc type="email" vào tag <input> lĩnh vực và trình duyệt của bạn sẽ lo phần còn lại.

Hãy thử cố gắng gửi (submit) biểu mẫu (form) trong bản demo CodePen dưới đây mà không nhập vào nội dung gì. Sau đó hãy thử gửi (submit) biểu mẫu với một email không hợp lệ xem sao:

Các Khuôn Mẫu Regex

Chắc bạn cũng để ý rằng bạn có thể nhập vào một email dạng a@a. Rõ ràng là bạn muốn nhận được một địa chỉ email thật sự, vì vậy, bằng cách xác định một khuôn mẫu, bắt buộc nó phải phù hợp với dữ liệu của chúng ta, chúng ta có thể xác minh những gì được nhập vào. Hãy chắc chắn rằng nó phù hợp với khuôn mẫu có một dấu chấm và 2-3 ký tự ở cuối. Chúng ta có thể làm việc này bằng cách sử dụng thuộc tính pattern và regex.

Nếu bạn đang dự kiến học về regex bạn cần phải hoàn thành việc đó trước đã. Regex là công cụ mạnh mẽ và sẽ có mặt trong tất cả các loại lập trình bạn sẽ làm.

Tôi đang cảm thấy khủng khiếp vì sực phức tạp của regex vì vậy tôi đã Google cụm từ "email regex" (vì tôi chắc rằng việc này đã được giải quyết trước đó rồi) và kết thúc việc tìm kiếm ở trang regular-expressions.info. Đây là đoạn regex của chúng ta lấy trên trang regex101.com (một nguồn rất hữu ích để thử nghiệm các regex của bạn).

Nếu bạn đã đọc một vài thứ về các khuôn mẫu, bạn sẽ nhận ra là tác giả đã loại trừ những chữ cái viết thường bởi vì chúng sẽ trông chờ bạn sử dụng một "case-insensitive flag". Khuôn mẫu cho tag input trong HTML5 không chấp nhận "flags" do đó để lấy được những chữ cái viết thường chúng ta cần thêm vào các khoảng chữ cái viết hoa và viết thường (ví dụ: A-Za-z). Bạn có thể tìm hiểu chính xác từng phần của đoạn khuôn mẫu này sẽ làm gì ở bảng (panel) phía bên phải.

Để tạo các thông báo lỗi xác minh đại loại kiểu "Sai định dạng rồi!" chúng ta có thể đặt một thuộc tính title chứa một thông báo lỗi cụ thể, như thế này:

Bây giờ hãy thử với khung nhập email trong bản demo này:

Đừng lo lắng, bạn sẽ không phải viết những đoạn khuôn mẫu điên rồ cho mỗi khung nhập mà bạn có đâu. Phần lớn thời gian bạn sẽ chỉ cần yêu cầu một cái gì đó và phải chắc chắn rằng nó là một loại dữ liệu nhất định nào đó thôi. Ví dụ, yêu cầu một con số lớn 5 thì có thể tương tự như vầy <input type="number" min="5" required>.

Hãy nhớ rằng không phải tất cả các trình duyệt đều hỗ trợ tất cả các thuộc tính xác minh khác nhau. Ví dụ, FireFox không hỗ trợ thuộc tính minlength. Thuộc tính pattern được hỗ trợ khá nhiều, do đó bạn luôn có thể ứng dụng tính năng của nó để thay thế cho các thuộc tính khác. Thuộc tính minlength có thể được thay thế bởi pattern=".{3,}" với số 3 là độ dài tối thiểu mà bạn cần.

Nếu bạn không thể tìm được một đoạn khuôn mẫu mà bạn có thể sử dụng để truy cập vào các thư viện JavaScript cũ của bạn, bạn có thể sẽ tìm được nó khi xem qua mã nguồn của chúng, vì chắc chắn là thư viện JavaScript đó phải đang phù hợp với những đoạn khuôn mẫu regex như của chúng ta.

Phản Hồi Ngay Lập Tức

Các khung nhập của chúng ta sẽ hiển thị một số dấu hiệu khi đã hợp lệ, không phải sẽ rất tuyệt sao? May mắn thay, có một bộ chọn CSS :valid cho điều đó. Còn có một bộ chọn :invalid. Nhập tên của bạn trong bản demo này:

Bạn sẽ thấy ngay rằng các phong cách không hợp lệ xuất hiện ngay cả trước khi chúng ta chạm vào input.

Bạn có thể nghĩ về việc làm một cái gì đó như :invalid:not(:empty), nhưng nó sẽ không có tác dụng vì trình duyệt ngu ngốc và luôn luôn xem xét các phần tử form là rỗng.

Chúng ta có thể tạo một số thủ thuật với :placeholder-shown mới như được hiển thị trong demo sau đây, nhưng trình duyệt hỗ trợ :placeholder-shown thì ít và không có một polyfill hiện đại cho nó. Làm biếng.

Bây giờ, cách tốt nhất của chúng ta là thêm một số JavaScript để chuyển đổi một lớp tùy thuộc vào input có rỗng hay không. Đây là bản demo:

Làm cho nó đẹp đẽ

Phần yêu thích của tôi với cách tiếp cận này là bạn có toàn quyền điều khiển CSS trên từng phần tử trong form của bạn.

Bằng cách đẩy <span> nằm dưới <input> chúng ta truy cập vào bộ chọn anh em liền kề trên lớp .empty của chúng ta. Sau đó, chúng ta có thể tạo ra một placeholder trượt ra khỏi input ngay sau khi input không còn rỗng. Dưới đây là một ví dụ:

Nếu <span> đang ở dưới <input> không có khả năng truy cập, bạn luôn có thể tinh chỉnh JavaScript để thêm lớp empty vào <label> để thay thế. Sau đó vấn đề chỉ là chỉnh CSS một chút. Dưới đây là một ví dụ làm theo cách đó:

Các lớp xác nhận cũng làm việc trên phần tử <form> để bạn có thể thật sự kiểm soát phong cách.

Không có giới hạn đối với những gì bạn có thể làm với cách tiếp cận này. Một số ý tưởng:

  • Thêm các biểu tượng xác nhận ẩn/hiện.
  • Lắc input nếu người dùng không tập trung và nó không hợp lệ.
  • Làm mờ các input khi họ điền chính xác.

Hỗ trợ trình duyệt

  • Hoàn hảo trong trình duyệt hiện đại và IE10+.
  • IE9- không hỗ trợ xác nhận các bộ chọn giả vì vậy bạn sẽ không thể định phong cách nhưng form vẫn có đẩy đủ chức năng.

Các hạn chế có thể có

Không có cách nào để định phong cách các thông báo xác nhận. Trình duyệt vô hiệu hoá khả năng định phong cách những cái đó. Tôi không nghĩ rằng đây là một điều xấu vì mọi người sẽ thường sử dụng những phong cách xác nhận này. Trong thực tế, đó có lẽ là lý do tại sao trình duyệt quyết định ngăn chúng ta truy cập vào chúng. Bây giờ chúng đã được tiêu chuẩn hóa.

Chúng cũng nằm ngoài dòng chảy của trang vì vậy bạn không phải lo lắng về việc chúng đẩy các phần tử form xung quanh cùng với kiểu dáng của chúng.

Nếu bạn cần kiểm soát hoàn toàn các phong cách xác nhận, thì phương pháp này không dành cho bạn.

Để Lại Một Bình Luận

Tôi rất vui khi nhận được các phản hồi về bài viết này và cũng rất muốn biết về một số công nghệ/cách thiết kế trình xác nhận (validation) thú vị khác!

Nguồn

Bài viết "Adaptive Placeholders" của Danny King đã cho tôi những suy nghĩ về điều này.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.