Trang chủ Lập trình Javascript - HTML Các cách kiểm tra điều kiện trống trong form đăng ký, liên...

Các cách kiểm tra điều kiện trống trong form đăng ký, liên lạc

Dạo này nhận nhiều công việc liên quan đến việc thiết lập các trường yêu cầu phải nhập thông tin trong các form liên lạc cho các website khách hàng. Xin chia sẻ với các bạn các cách thực hiện công việc này.

form-validation

Cách 1: Sử dụng HTML5

HTML5 hỗ trợ người dùng thiết lập thuộc tính cho các trường trong form thông qua một số từ khóa nhất định. Và từ khóa để yêu cầu các trường không được bỏ trống là required. Bạn chỉ cần chèn nó vào trường không muốn bỏ trong là được.

Rất đơn giản cho những lập trình viên… làm biếng. Tuy nhiên rất tiếc là tính năng của dòng lệnh này không hoạt động trên trình duyệt Safari của Apple nên khi sử dụng nó mình thưởng bị bắt phải… làm lại. Vì vậy nếu gặp khách hàng dễ chịu và không yêu cầu cao thì bạn có thể sử dụng tính năng này cho đơn giản vì nó không yêu cầu gì cao.

Bạn có thể tham khảo thêm thông tin cũng như hướng dẫn, minh họa các thẻ thuộc tính khác cho form của HTML5 tại: http://www.w3schools.com/html/html5_form_attributes.asp.

Cách 2: Tự viết bằng JavaScript

Khi thực hiện dự án cho khách hàng thì cách này mình hay sử dụng nhất vì khi thực hiện ta có thể chủ động tất cả, từ cấu hình đến thông báo lỗi. Cũng với ví dụ với đoạn mã ở trên nhé (đương nhiên là không có required):

Ta sẽ sử dụng một đoạn mã JavaScript để kiểm tra điều kiện như sau:

Trong đó $(“#username”).val() sẽ là giá trị nhập vào của khách và câu lệnh trên đại ý là nếu khách không nhập giá trị gì vào trường có ID là username thì… Thì như thế nào thì bạn đặt lệnh trong dấu {}

Có một số lựa chọn như popup báo lỗi thì bạn sử dụng alert(), nếu muốn đánh dấu khung lỗi thì có thể dùng .css(),… Và đặc biệt là cần phải có lệnh ngăn hành động .preventDefault().

Cụ thể lệnh sẽ như thế này:

Đoạn mã trên có ý nghĩa là khi bấm nút submit của form có ID là formname thì nếu ở ô có ID là username mà người dùng không điền thông tin thì form này không được submit thành công mà sẽ có popup thông báo lỗi là: Ban chua nhap thong tin tai o Username. và kèm theo đó là ô này sẽ được đánh dấu đỏ.

Chú ý là bạn phải chèn thư viện jQuery và trước để có thể sử dụng lệnh JavaScript này nhé.

Cách 3: Sử dụng thư viện jQuery được xây dựng sẵn

Vì đây là tính năng rất được nhiều trang web sử dụng nên một số lập trình viên đã xây dựng sẵn nhiều thư viện jQuery để chia sẻ với mọi người. Giúp ta khỏi phải mất công viết như ở cách 2 mình làm. Và đương nhiên những thư viện này rất chuyên nghiệp vì ngoài việc kiểm tra trường trống thì nó còn giúp kiểm tra dữ liệu nhập vào có đúng định dạnh không như: số điện thoại thì cần kiểu số, email, địa chỉ trang web phải phù hợp kiểu định dạng,…

Có thể điểm mặt một số thư viện có chức này như:

Bạn có thể tìm kiếm thêm trên Google với từ khóa thích hợp.

Việc sử dụng các thư viện này đơn giản vì nó đã được cấu hình sẵn nên bạn chỉ cần chèn vào trang và khai báo form, các trường và điều kiện kiểm tra là nó sẽ chạy.

Một điểm lưu ý là có một số thư viện yêu cầu chạy thư viện jQuery phù hợp (đúng phiên bản) nên nhiều khi “đá thúng đụng nia” với thư viện hiện tại bạn đang chạy cho một số tính năng cũng như hiệu ứng khác trên trang web nên các bạn cần kiểm tra kỹ trước khi sử dụng.

Chúc các bạn thành công.

Huỳnh Mai Anh Kiệt

- Advertisement -
Huỳnh Mai Anh Kiệthttps://anhkiet.biz
Anh là một người đam mê công nghệ. Hiện tại anh là một lập trình viên cho Hura Apps - một startup nhỏ về công nghệ tại Quy Nhơn.

1 BÌNH LUẬN

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây

BÀI VIẾT MỚI

10 Công Cụ Có Thể Thay Thế ChatGPT

ChatGPT là một mô hình ngôn ngữ lớn được phát triển bởi OpenAI. Nó cung cấp các câu trả lời nhanh chóng và ngắn...

Hướng Dẫn Đăng Ký Nhận Mã Giảm Giá Highland Coffee

Highland Coffee đang có nhiều chương trình khuyến mã cho khách hàng của mình. Các khuyến mãi có thể bao gồm upsize, mua 1...

Quà cuối năm 2022 từ Shopify

Năm nay nhận quà từ các đối tác công nghệ hơi bị nhiều. Mới đây mình lại nhận được quà từ Shopify. Quà về đúng...

Nhận quà từ đối tác công nghệ Recharge

Recharge là một trong những công ty chuyên cung cấp giải pháp bán hàng đăng ký định kỳ (subscription payments) cho các nền tảng...

Hướng dẫn tải video ngắn Facebook Reel miễn phí

Facebook Reels là tính năng video ngắn mới của Facebook. Nếu bạn muốn tải những video ngắn này của mọi người thì bạn có...

BẠN XEM CHƯA

Hiệu ứng Burning Life

Video demo: [youtube https://www.youtube.com/watch?v=_9eEx1xQ56w?rel=0&w=480&h=360] Link download: Mediafire: http://tinyurl.com/k9nuvy6 Box.net: http://tinyurl.com/kujnoaq

Hướng dẫn tra cứu mã số thuế thu nhập cá nhân

Thuế thu nhập cá nhân là khoản tiền mà người có thu nhập phải trích nộp một phần tiền lương, hoặc từ các nguồn...

Quản lý và cập nhật các phần mềm trên máy tính dễ dàng với USSU Unlimited

Máy tính của bạn cài đặt vô số phần mềm tiện ích và để đảm bảo các phần mềm này luôn được cập nhật...

Google sắp khai tử ứng dụng Google Shopping trên iOS và Android

Google được cho là đã thêm Google Shopping vào danh sách các ứng dụng sắp khai tử của mình. Sau khi các thành viên...

Mua sim đi du lịch nước ngoài

Hình như chỉ có ở Việt Nam mình là internet thoải mái nhất. Đâu đâu cũng có wifi và đặt biệt là hoàn toàn...