Hướng dẫn how do you show error messages in html form? - làm cách nào để hiển thị thông báo lỗi trong dạng html?
Sử dụng xác thực JavaScript là một trong những phần hấp dẫn nhất trong phát triển web, nơi bạn có thể hiển thị các thông báo lỗi cho người dùng trong trường hợp biểu mẫu không chứa dữ liệu trường bắt buộc. Hãy thêm một biểu mẫu trước khi làm việc trên phần xác thực. Show
Ở đây, chúng tôi đã tạo một biểu mẫu thêm một tên vào nó bằng phương thức POST để ngăn biểu mẫu được gửi qua URL và thêm chức năng JavaScript để được khởi tạo trên trường hợp gửi biểu mẫu. Chúng tôi cũng đã thêm một ID trống bên cạnh các nhãn cho mỗi trường biểu mẫu nơi chúng tôi sẽ hiển thị thông báo lỗi. Bây giờ, hãy thêm chức năng để xác thực nó. Bên trong hàm ValidateForm () được lập trình để khởi tạo khi gửi biểu mẫu, chúng tôi đã tạo biến riêng lẻ để lưu trữ các giá trị đầu vào từ mỗi trường biểu mẫu. Sau đó, chúng tôi đã kiểm tra độ dài chuỗi của mỗi giá trị. Nếu bất kỳ giá trị FormField nào không có văn bản bên trong nó, thì ID lỗi tương ứng của chúng sẽ hiển thị các văn bản được xác định bên trong nó với hàm được xây dựng trước JavaScript getEuityById (). Để ngăn chặn biểu mẫu được gửi trong trường hợp có bất kỳ lỗi nào, chúng tôi đã thêm một kết hợp hoặc câu lệnh khổng lồ để đưa người dùng trở lại cùng một trang mà không xử lý thêm dữ liệu cho dữ liệu ở cuối.validateForm() which is programmed to initialize on form submission, we created individual variable to store input values from each of the form fields. Then, we checked the string length of each of the values. If any of those formfield values have no texts inside it, then, their respective error ids will display the defined texts inside it with the javascript pre-built function getElementByID(). To prevent the form from being submitted in case of any error, we added a huge combination of OR statement to return the user back to the same page without further processing fo data at the end. Tôi đã thực hiện một hướng dẫn video chi tiết về xác thực biểu mẫu JavaScript trên webtrickshome của kênh YouTube của tôi nếu bạn muốn tìm hiểu thêm.javascript form validation which is on my youtube channel webtrickshome if you are interested to learn more. 85 lượt thích & nbsp; & nbsp; & nbsp; & nbsp; 0 không thích & nbsp; & nbsp; & nbsp; & nbsp; 0 Nhận xét & NBSP; & nbsp; & nbsp; & nbsp; 0 Dislike 0 Comment Trong mô -đun nàyclient-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls. This article leads you through basic concepts and examples of client-side form validation. Chủ đê nâng cao Làm thế nào để bạn mã hóa lỗi trong html?as well as the client-side, because client-side validation is too
easy to bypass, so malicious users can still easily send bad data through to your server. Read Website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind. HTML có hiển thị lỗi không? Hai vị trí phổ biến nhất cho các thông báo lỗi nằm ở đầu biểu mẫu và nội tuyến với các trường sai lầm. Vị trí nào trực quan hơn cho người dùng? Một nghiên cứu đã phát hiện ra rằng việc hiển thị tất cả các thông báo lỗi ở đầu biểu mẫu đặt tải nhận thức cao vào bộ nhớ người dùng.form validation. When you enter data, the browser and/or the web server will check to
see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation. Trước khi gửi dữ liệu đến máy chủ, điều quan trọng là đảm bảo tất cả các điều khiển biểu mẫu cần thiết được điền vào, ở định dạng chính xác. Điều này được gọi là xác thực biểu mẫu phía máy khách và giúp đảm bảo dữ liệu được gửi khớp với các yêu cầu được quy định trong các điều khiển biểu mẫu khác nhau. Bài viết này dẫn bạn qua các khái niệm cơ bản và ví dụ về xác thực hình thức phía khách hàng. Chúng tôi muốn làm cho việc điền vào các biểu mẫu web dễ dàng nhất có thể. Vậy tại sao chúng ta khăng khăng xác nhận các hình thức của chúng ta? Có ba lý do chính: CẢNH BÁO: Không bao giờ tin tưởng dữ liệu được truyền vào máy chủ của bạn từ máy khách. Ngay cả khi biểu mẫu của bạn đang xác thực chính xác và ngăn chặn đầu vào bị dị tật ở phía máy khách, người dùng độc hại vẫn có thể thay đổi yêu cầu mạng. Never trust data passed to your server from the
client. Even if your form is validating correctly and preventing malformed input on the client-side, a malicious user can still alter the network request. Các loại xác thực phía máy khách khác nhauCó hai loại xác thực phía máy khách khác nhau mà bạn sẽ gặp trên web:
Sử dụng xác thực biểu mẫu tích hợpMột trong những tính năng quan trọng nhất của các điều khiển hình thức hiện đại là khả năng xác nhận hầu hết dữ liệu người dùng mà không cần dựa vào JavaScript. Điều này được thực hiện bằng cách sử dụng các thuộc tính xác thực trên các yếu tố biểu mẫu. Chúng tôi đã thấy nhiều trong số này sớm hơn trong khóa học, nhưng để tóm tắt lại:
Nếu dữ liệu được nhập trong một trường biểu mẫu tuân theo tất cả các quy tắc được chỉ định bởi các thuộc tính trên, thì nó được coi là hợp lệ. Nếu không, nó được coi là không hợp lệ. Khi một yếu tố hợp lệ, những điều sau đây là đúng:
Khi một phần tử không hợp lệ, những điều sau đây là đúng:
Ví dụ xác nhận biểu mẫu tích hợpTrong phần này, chúng tôi sẽ kiểm tra một số thuộc tính mà chúng tôi đã thảo luận ở trên. Tệp bắt đầu đơn giảnHãy bắt đầu với một ví dụ đơn giản: một đầu vào cho phép bạn chọn xem bạn thích chuối hay anh đào. Ví dụ này liên quan đến một văn bản đơn giản 0 với một 1 được liên kết và gửi 2. Tìm mã nguồn trên GitHub tại Fruit-start.html và một ví dụ trực tiếp dưới đây.
Để bắt đầu, hãy tạo một bản sao của 3 trong một thư mục mới trên ổ cứng của bạn.Thuộc tính cần thiếtTính năng xác thực HTML đơn giản nhất là thuộc tính 0. Để thực hiện bắt buộc đầu vào, hãy thêm thuộc tính này vào phần tử. Khi thuộc tính này được đặt, phần tử khớp với lớp giả UI ____35 và biểu mẫu sẽ không gửi, hiển thị thông báo lỗi khi gửi khi đầu vào trống. Mặc dù trống, đầu vào cũng sẽ được coi là không hợp lệ, phù hợp với lớp giả UI ____28.Thêm thuộc tính 0 vào đầu vào của bạn, như được hiển thị bên dưới.
Lưu ý các CSS được bao gồm trong tệp ví dụ:
CSS này làm cho đầu vào có đường viền đứt nét màu đỏ khi nó không hợp lệ và một đường viền màu đen rắn tinh tế hơn khi hợp lệ. Chúng tôi cũng đã thêm một gradient nền khi đầu vào được yêu cầu và không hợp lệ. Hãy thử hành vi mới trong ví dụ dưới đây: Hãy thử gửi biểu mẫu mà không có giá trị. Lưu ý cách đầu vào không hợp lệ được lấy nét, thông báo lỗi mặc định ("Vui lòng điền vào trường này") xuất hiện và biểu mẫu được ngăn chặn được gửi. Sự hiện diện của thuộc tính 0 trên bất kỳ phần tử nào hỗ trợ thuộc tính này có nghĩa là phần tử phù hợp với lớp giả 5 cho dù nó có giá trị hay không. Nếu 0 không có giá trị, 1 sẽ khớp với lớp giả 8.Lưu ý: Đối với trải nghiệm người dùng tốt, hãy cho biết người dùng khi cần trường biểu mẫu. Nó không chỉ trải nghiệm người dùng tốt, nó được yêu cầu bởi các hướng dẫn tiếp cận WCAG. Ngoài ra, chỉ yêu cầu người dùng nhập dữ liệu bạn thực sự cần: ví dụ, tại sao bạn thực sự cần biết giới tính hoặc tiêu đề của ai đó? For good user experience, indicate to the user when form fields are required. It isn't only good user experience, it is required by WCAG accessibility guidelines. Also, only require users to input data you actually need: For example, why do you really need to know someone's gender or title? Xác nhận dựa trên biểu thức chính quyMột tính năng xác nhận hữu ích khác là thuộc tính 6, mong đợi một biểu thức thông thường là giá trị của nó. Một biểu thức chính quy (regex) là một mẫu có thể được sử dụng để phù hợp với các kết hợp ký tự trong các chuỗi văn bản, vì vậy RegEXP là lý tưởng để xác thực biểu mẫu và phục vụ nhiều cách sử dụng khác trong JavaScript.RegEXPS khá phức tạp và chúng tôi không có ý định dạy bạn một cách triệt để trong bài viết này. Dưới đây là một số ví dụ để cung cấp cho bạn một ý tưởng cơ bản về cách chúng hoạt động.
Có nhiều khả năng khác mà chúng tôi không bao gồm ở đây. Đối với một danh sách đầy đủ và nhiều ví dụ, hãy tham khảo tài liệu biểu thức thường xuyên của chúng tôi. Hãy thực hiện một ví dụ. Cập nhật HTML của bạn để thêm thuộc tính 6 như thế này:
Điều này cung cấp cho chúng tôi bản cập nhật sau - hãy thử nó: Trong ví dụ này, phần tử 0 chấp nhận một trong bốn giá trị có thể: chuỗi "chuối", "chuối", "anh đào" hoặc "anh đào". Các biểu thức thông thường là nhạy cảm với trường hợp, nhưng chúng tôi đã hỗ trợ nó được viết hoa cũng như các phiên bản trường hợp thấp hơn bằng cách sử dụng một mẫu "AA" bổ sung được lồng bên trong các giá đỡ vuông.Tại thời điểm này, hãy thử thay đổi giá trị bên trong thuộc tính 6 thành một số ví dụ bạn đã thấy trước đó và xem xét cách ảnh hưởng đến các giá trị bạn có thể nhập để làm cho giá trị đầu vào hợp lệ. Hãy thử viết một số của riêng bạn, và xem nó diễn ra như thế nào. Làm cho chúng liên quan đến trái cây nếu có thể để các ví dụ của bạn có ý nghĩa!Nếu giá trị không trống của 0 không khớp với mẫu biểu thức chính quy, 1 sẽ khớp với lớp giả 8.Lưu ý: Một số loại phần tử 0 element types don't need a 6 attribute to be validated against a regular expression. Specifying the 2 type, for example, validates the inputs value against a well-formed email address pattern or a pattern matching a comma-separated list of email addresses if it has
the 3 attribute.Hạn chế độ dài của các mục nhập của bạnBạn có thể hạn chế độ dài ký tự của tất cả các trường văn bản được tạo bởi 0 hoặc 5 bằng cách sử dụng các thuộc tính 1 và 2. Một trường không hợp lệ nếu nó có giá trị và giá trị đó có ít ký tự hơn giá trị 1 hoặc nhiều hơn giá trị 2.Các trình duyệt thường không để người dùng nhập giá trị dài hơn dự kiến vào các trường văn bản. Trải nghiệm người dùng tốt hơn là chỉ sử dụng 2 là cung cấp phản hồi đếm ký tự theo cách có thể truy cập và để họ chỉnh sửa nội dung của họ xuống kích thước. Một ví dụ về điều này là giới hạn nhân vật được thấy trên Twitter khi tweet. JavaScript, bao gồm các giải pháp sử dụng 2, có thể được sử dụng để cung cấp điều này.Hạn chế các giá trị của các mục nhập của bạnĐối với các trường số (nghĩa là 2), các thuộc tính 3 và 4 có thể được sử dụng để cung cấp một loạt các giá trị hợp lệ. Nếu trường chứa một giá trị bên ngoài phạm vi này, nó sẽ không hợp lệ.Hãy xem xét một ví dụ khác. Tạo một bản sao mới của tệp fruit-start.html. Bây giờ xóa nội dung của phần tử 5 và thay thế nó bằng cách sau:
Đây là ví dụ chạy trực tiếp: Lưu ý: 2 (and other types, such as 03 and 04) can also take a 05 attribute, which specifies what increment the value will go up or down by when the input controls are used (such as the up and down number buttons). In the above example we've not included a 05 attribute, so the value defaults to 07. This means that floats, like 3.2, will also show as invalid. Ví dụ đầy đủDưới đây là một ví dụ đầy đủ để hiển thị việc sử dụng các tính năng xác nhận tích hợp của HTML. Đầu tiên, một số HTML: 0 Và bây giờ một số CSS để tạo kiểu HTML: 1 Điều này hiển thị như sau: Xem các thuộc tính liên quan đến xác thực để biết danh sách đầy đủ các thuộc tính có thể được sử dụng để hạn chế các giá trị đầu vào và các loại đầu vào hỗ trợ chúng. Xác thực các biểu mẫu bằng cách sử dụng JavaScriptBạn phải sử dụng JavaScript nếu bạn muốn kiểm soát giao diện của các thông báo lỗi bản địa. Trong phần này, chúng tôi sẽ xem xét các cách khác nhau để làm điều này. API xác nhận ràng buộcHầu hết các trình duyệt đều hỗ trợ API xác thực ràng buộc, bao gồm một tập hợp các phương thức và thuộc tính có sẵn trên các giao diện DOM phần tử biểu mẫu sau:
API xác thực ràng buộc làm cho các thuộc tính sau có sẵn trên các yếu tố trên.
API xác thực ràng buộc cũng cung cấp các phương thức sau có sẵn trên các phần tử trên và phần tử 74. Thực hiện thông báo lỗi tùy chỉnhNhư bạn đã thấy trong các ví dụ ràng buộc xác thực HTML trước đó, mỗi khi người dùng cố gắng gửi biểu mẫu không hợp lệ, trình duyệt sẽ hiển thị thông báo lỗi. Cách thông báo này được hiển thị tùy thuộc vào trình duyệt. Những tin nhắn tự động này có hai nhược điểm:
Tùy chỉnh các thông báo lỗi này là một trong những trường hợp sử dụng phổ biến nhất của API xác thực ràng buộc. Hãy làm việc thông qua một ví dụ đơn giản về cách làm điều này. Chúng tôi sẽ bắt đầu với một số HTML đơn giản (vui lòng đặt nó vào một tệp HTML trống; sử dụng một bản sao mới của Fruit-start.html làm cơ sở, nếu bạn thích): 2 Và thêm JavaScript sau vào trang: 3 Ở đây chúng tôi lưu trữ một tham chiếu đến đầu vào email, sau đó thêm trình nghe sự kiện cho nó chạy mã chứa mỗi lần giá trị bên trong đầu vào được thay đổi. Bên trong mã chứa, chúng tôi kiểm tra xem thuộc tính 83 của email có trả về 27 hay không, có nghĩa là giá trị chứa không khớp với mẫu cho địa chỉ email được hình thành tốt. Nếu vậy, chúng tôi gọi phương thức 85 với thông báo tùy chỉnh được hiển thị bằng cách gọi 79. Điều này hiển thị đầu vào không hợp lệ, do đó khi bạn cố gắng gửi biểu mẫu, việc gửi không thành công và thông báo lỗi tùy chỉnh được hiển thị. Nếu thuộc tính 83 trả về 22, chúng tôi sẽ gọi phương thức 85 là một chuỗi trống. Điều này hiển thị đầu vào hợp lệ, vì vậy biểu mẫu sẽ gửi. Bạn có thể dùng thử dưới đây: Một ví dụ chi tiết hơnBây giờ chúng ta đã thấy một ví dụ thực sự đơn giản, hãy xem cách chúng ta có thể sử dụng API này để xây dựng một số xác thực tùy chỉnh phức tạp hơn một chút. Đầu tiên, HTML. Một lần nữa, hãy thoải mái xây dựng điều này cùng với chúng tôi: 4 Mẫu đơn giản này sử dụng thuộc tính 90 để tắt xác thực tự động của trình duyệt; Điều này cho phép tập lệnh của chúng tôi kiểm soát xác thực. Tuy nhiên, điều này không vô hiệu hóa hỗ trợ cho API xác thực ràng buộc cũng như việc áp dụng các lớp giả CSS như 7, v.v. điều đó có nghĩa là mặc dù trình duyệt không tự động kiểm tra tính hợp lệ của biểu mẫu trước khi gửi dữ liệu của nó, bạn có thể Vẫn tự làm và tạo kiểu hình thức cho phù hợp.Đầu vào của chúng tôi để xác thực là 92, là 0 và có 1 của 8 ký tự. Hãy kiểm tra chúng bằng mã riêng của chúng tôi và hiển thị thông báo lỗi tùy chỉnh cho từng thông báo.Chúng tôi đang nhắm đến việc hiển thị các thông báo lỗi bên trong phần tử 95. Thuộc tính 96 được đặt trên 95 để đảm bảo rằng thông báo lỗi tùy chỉnh của chúng tôi sẽ được trình bày cho mọi người, bao gồm cả việc đọc ra cho người dùng sàng lọc. Lưu ý: Một điểm quan trọng ở đây là việc cài đặt thuộc tính 90 attribute on the form is what stops the form from showing its own error message bubbles, and allows us to instead display the custom error messages in the DOM in some manner of our own choosing. Bây giờ vào một số CSS cơ bản để cải thiện giao diện của biểu mẫu một chút và cung cấp một số phản hồi trực quan khi dữ liệu đầu vào không hợp lệ: 5 Bây giờ chúng ta hãy nhìn vào JavaScript thực hiện xác thực lỗi tùy chỉnh. 6 Các ý kiến giải thích những điều khá tốt, nhưng ngắn gọn:
Đây là kết quả trực tiếp: API xác thực ràng buộc cung cấp cho bạn một công cụ mạnh mẽ để xử lý xác thực biểu mẫu, cho phép bạn có quyền kiểm soát rất lớn đối với giao diện người dùng ở trên và vượt ra ngoài những gì bạn có thể làm với HTML và CSS. Xác thực các biểu mẫu mà không có API tích hợpTrong một số trường hợp, chẳng hạn như điều khiển tùy chỉnh, bạn sẽ không thể hoặc không muốn sử dụng API xác thực ràng buộc. Bạn vẫn có thể sử dụng JavaScript để xác thực biểu mẫu của mình, nhưng bạn sẽ phải tự viết. Để xác thực một biểu mẫu, hãy tự hỏi mình một vài câu hỏi: Tôi nên thực hiện loại xác nhận nào?Bạn cần xác định cách xác thực dữ liệu của mình: hoạt động chuỗi, chuyển đổi loại, biểu thức chính quy, v.v. Tuỳ bạn. Tôi nên làm gì nếu biểu mẫu không xác thực?Đây rõ ràng là một vấn đề UI. Bạn phải quyết định làm thế nào biểu mẫu sẽ hoạt động. Hình thức có gửi dữ liệu không? Bạn có nên làm nổi bật các trường bị lỗi? Bạn có nên hiển thị thông báo lỗi không? Làm thế nào tôi có thể giúp người dùng sửa dữ liệu không hợp lệ?Để giảm sự thất vọng của người dùng, điều rất quan trọng là cung cấp càng nhiều thông tin hữu ích càng tốt để hướng dẫn họ sửa chữa đầu vào của họ. Bạn nên cung cấp các đề xuất trước để họ biết những gì mong đợi, cũng như thông báo lỗi rõ ràng. Nếu bạn muốn đào vào các yêu cầu UI xác thực biểu mẫu, đây là một số bài viết hữu ích bạn nên đọc:
Một ví dụ không sử dụng API xác thực ràng buộcĐể minh họa điều này, sau đây là phiên bản đơn giản hóa của ví dụ trước mà không có API xác thực ràng buộc. HTML gần như giống nhau; Chúng tôi vừa xóa các tính năng xác thực HTML. 7 Tương tự, CSS không cần phải thay đổi nhiều; Chúng tôi vừa biến lớp giả CSS Pseudo thành một lớp thực và tránh sử dụng bộ chọn thuộc tính không hoạt động trên Internet Explorer 6. 8 Những thay đổi lớn nằm trong mã JavaScript, cần phải thực hiện nhiều việc nâng cao hơn. 9 Kết quả trông như thế này: Như bạn có thể thấy, không khó để tự mình xây dựng một hệ thống xác thực. Phần khó khăn là làm cho nó đủ chung để sử dụng cả nền tảng chéo và trên bất kỳ hình thức nào bạn có thể tạo ra. Có nhiều thư viện có sẵn để thực hiện xác thực biểu mẫu, chẳng hạn như xác nhận.js. Kiểm tra kỹ năng của bạn!Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Xác thực hình thức. Bản tóm tắtXác thực biểu mẫu phía máy khách Đôi khi yêu cầu JavaScript nếu bạn muốn tùy chỉnh thông báo kiểu dáng và lỗi, nhưng nó luôn đòi hỏi bạn phải suy nghĩ cẩn thận về người dùng. Luôn nhớ giúp người dùng của bạn sửa dữ liệu họ cung cấp. Cuối cùng, hãy chắc chắn:
Khi bạn đã kiểm tra xem biểu mẫu được điền chính xác, biểu mẫu có thể được gửi. Chúng tôi sẽ bao gồm việc gửi dữ liệu biểu mẫu tiếp theo.
Trong mô -đun nàyChủ đê nâng caoLàm thế nào để bạn mã hóa lỗi trong html?Sau đây là danh sách các mã lỗi HTML phổ biến nhất.... Mã lỗi HTML phổ biến .. HTML có hiển thị lỗi không?Bản thân HTML không bị lỗi cú pháp vì trình duyệt phân tích cú pháp một cách thoải mái, có nghĩa là trang vẫn hiển thị ngay cả khi có lỗi cú pháp.Các trình duyệt có các quy tắc tích hợp để nêu cách diễn giải đánh dấu bằng văn bản không chính xác, vì vậy bạn sẽ có được một cái gì đó chạy, ngay cả khi đó không phải là những gì bạn mong đợi. because browsers parse it permissively, meaning that the page still displays even if there are syntax errors. Browsers have built-in rules to state how to interpret incorrectly written markup, so you'll get something running, even if it is not what you expected.
Làm cách nào để hiển thị lỗi mà không có hộp cảnh báo?Chúng ta có thể hiển thị lỗi với hai phương thức mà không cần sử dụng hộp cảnh báo.Cú pháp: node.textContent = "Một số thông báo lỗi" // để vẽ nút chú ý.node. textContent = "Some error message" // To draw attention node.
Tôi hiển thị lỗi biểu mẫu ở đâu?Hai vị trí phổ biến nhất cho các thông báo lỗi nằm ở đầu biểu mẫu và nội tuyến với các trường sai lầm.Vị trí nào trực quan hơn cho người dùng?Một nghiên cứu đã phát hiện ra rằng việc hiển thị tất cả các thông báo lỗi ở đầu biểu mẫu đặt tải nhận thức cao vào bộ nhớ người dùng.at the top of the form and inline with erroneous fields. Which placement is more intuitive for users? A research study discovered that displaying all error messages at the top of the form puts a high cognitive load on user memory. |