Bạn có thể hiển thị thông báo lỗi bằng phần tử HTML không?

Chrome 21

Firefox 14

Opera 12

Như bạn có thể thấy, cả ba chỉ báo lỗi cho trường đầu tiên. Firefox ít nhất có quyền đặt đường viền màu đỏ xung quanh tất cả các trường có dữ liệu không hợp lệ theo mặc định

Một trình duyệt đáng chú ý bị thiếu trong danh sách trên là Safari. Mặc dù Safari hỗ trợ API xác thực ràng buộc nhưng bản thân xác thực đã bị tắt

khả năng sử dụng

Từ góc độ khả năng sử dụng, chỉ hiển thị cho người dùng thông báo lỗi đầu tiên là xấu. Hãy tưởng tượng sẽ khó chịu như thế nào khi liên tục sửa lỗi chỉ để gặp lỗi tiếp theo trong trình tự. Nếu bạn đã gặp phải một hình thức như thế này trước khi bạn biết tôi đang nói về điều gì

May mắn thay, các trình duyệt cung cấp một cái có thể được sử dụng để cung cấp chức năng này

Sử dụng API xác thực

Tất cả các nút dom hiện có một thuộc tính cho biết liệu nút đó có phải là ứng cử viên để xác thực biểu mẫu hay không

Các nút trong đó willValidate là true cũng có thuộc tính validity. Thuộc tính validity phân giải thành đối tượng ValidityState chứa thông tin về việc trường có lỗi xác thực hay không, cũng như thông báo lỗi mà trình duyệt sẽ hiển thị cho người dùng

Để làm cho mọi thứ trở nên dễ dàng hơn, các trình duyệt cung cấp một. bộ chọn giả không hợp lệ có thể được sử dụng để chọn tất cả các phần tử có lỗi xác thực. Hãy xem cách điều này có thể được tận dụng để hiển thị tất cả các thông báo lỗi

Mật mã

Đây là cách tôi thực hiện điều này với tập lệnh phụ thuộc jQuery

    

    
    

        Name:
        
    

    

        Comments:
        
    
    
    

        Submit
    
​

2) Trong ví dụ của tôi, tôi bắt đầu mỗi thông báo lỗi với nội dung của trường ______3_______5. Điều này là do các thông báo cho từng trường thường giống hệt nhau. Một cách tiếp cận khác là sử dụng một phương thức API xác thực ràng buộc khác, để đặt một thông báo hoàn toàn tùy chỉnh

3) Bộ chọn 6 sẽ không trả về gì trong tất cả các trình duyệt không hỗ trợ API xác thực ràng buộc. Do đó, mã này sẽ không làm gì trong các trình duyệt đó

4) Opera không điền sai thuộc tính 7. Do đó, việc kiểm tra 8 là cần thiết để một thông báo được hiển thị cho Opera

5) Tôi không làm gì để tạo kiểu cho các trường riêng lẻ dựa trên việc chúng có dữ liệu hợp lệ hay không. Thông số kỹ thuật HTML5 cung cấp một số móc nối CSS để thực hiện việc này và tôi khuyên bạn nên đọc CSS Pseudo-Classes và HTML5 Forms từ html5 Doctor nếu bạn quan tâm đến việc bao gồm kiểu dáng như vậy

Đó là rất nhiều mã để làm điều gì đó đơn giản

Chuẩn rồi. Mặc dù hỗ trợ trình duyệt đang trở nên khá tốt đối với các biểu mẫu HTML5 nhưng bản thân việc triển khai vẫn còn một chút lỗi. Tuy nhiên, phương pháp này sẽ hoạt động để hiển thị tất cả các lỗi xác thực cho người dùng cuối

Polyfill

Nếu bạn quan tâm đến việc làm cho mã ở trên hoạt động trong tất cả các trình duyệt, bạn có một tùy chọn là bổ sung chức năng cho các trình duyệt không được hỗ trợ. Một sự lựa chọn mạnh mẽ là thư viện webshims

Để làm cho webshims hoạt động với mã trên, tất cả những gì bạn cần làm là thêm 9. Người bảo trì, @aFarkas thậm chí còn đủ để cung cấp cho tôi một ví dụ trực tiếp cho thấy điều này - http. //jsfiddle. net/trixta/HynHy/

Thẻ HTML nào cho thông báo lỗi?

Làm cách nào để xem mã lỗi HTML?

Làm cách nào để hiển thị thông báo lỗi trong HTML bằng PHP?

Làm cách nào để hiển thị thông báo lỗi ở dạng HTML bằng jQuery?