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

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ó...

Lập Trình Viên 25 Tuổi Kiếm Được $30.000 Mỗi Tháng Từ Các Ứng Dụng Shopify

Mat De Sousa là một doanh nhân Pháp, anh là người đứng sau 2 ứng dụng Shopify là Wide Bundles và WideReview do chính...

Lần đầu nhận quà từ Shopify

Hura Apps là 1 trong những đối tác của Shopify được vinh dự Shopify chọn tham gia chương trình (Huấn luyện Thương mại) Commerce...

Một số ưu đãi của Shopify cho người dùng đăng ký mới

Shopify chỉ cho phép người dùng mới 14 ngày dùng thử miễn phí. Nếu bạn cảm thấy khoảng thời gian này là không đủ...

Trang web hỗ trợ tìm kiếm trên Facebook

Facebook là mạng xã hội lớn nhất hiện nay. Thông tin được người dùng chia sẻ trên mạng xã hội này là vô cùng...

BẠN XEM CHƯA

Trải nghiệm lần đầu tiên đưa plugin lên WordPress

Vậy là cuối cùng thì plugin đầu tay mang tính cộng đồng cũng vừa mang tính... thử nghiệm đã được "rì ly" (release -...

Vẻ đẹp người chạy marathon về chót

Mỗi khi có dịp tới xem một cuộc chạy marathon, tôi thường không quan tâm lắm tới người vô địch và liệu anh ta...

5 website giúp bạn tập trung khi lập trình

1. Noisli Là nơi tổng hợp những âm thanh thiên nhiên, có thể giúp bạn thư giãn hoặc năng suất hơn. Tùy vào yêu cầu...

Cách chuyển đổi giao diện Facebook từ mới về giao diện cũ và ngược lại

Hôm rồi tự nhiên Facebook tự động chuyển giao diện đang dùng hiện tại (cũ) sang giao diện mới. OK! Hơi lạ, bất tiện...

Cách ngăn khách hàng truy cập vào Collection hoặc Product nhất định trong Shopify

Vì một lý do nào đó bạn không muốn khách hàng truy cập và một collection hoặc product nào đó trên cửa hàng Shopify...