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

Huỳnh Mai Anh Kiệthttps://www.mangbinhdinh.vn
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 tại Quy Nhơ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

- Advertisment -
Shopify

BÀI VIẾT MỚI

Facebook chi 400 triệu đô để mua lại Giphy

Giphy là một nền tảng trực tuyến hỗ trợ lưu trữ và tìm kiếm ảnh động (GIF) trực tuyến của Mỹ. Và mới đây...

reCAPTCHA rất hữu ích trong số hoá dữ liệu

Sách được xem là những kho tàng tri thức của nhân loại, tuy nhiên việc lưu trữ sách là cả một vấn đề to...

The Pirate Bay đã trở lại bằng tên miền ban đầu

Sau khi The Pirate Bay bị "chết" đội ngũ đã gửi tất cả lưu lượng truy cập đến "lỗ đen" (Local Black Hole 127.0.0.1.)và...

Dân Anh đốt cột phát sóng 5G vì nghi phát tán virus Corona

Ít nhất ba cột phát sóng 5G vừa bị đốt cháy vì có người tin rằng nó là nguồn phát tán virus corona. Theo BBC,...

Kiểm tra trình duyệt của khách có phải là Safari bằng PHP

Hôm rồi chợt nhận ra điều là Safari của Apple chưa hỗ trợ hiển thị ảnh WebP. Vậy là cái plugin Hura Apps Photos...

BẠN XEM CHƯA

Đàn bà cũ

Đàn bà cũ xác thân không trọn vẹn Tâm hồn già mòn mỏi với thời gian Đời đi qua nhiều vất vả gian nan Bao vấp ngã...

Các dịch vụ quảng cáo giúp bạn kiếm tiền có thể thay thế Google Adsense

Google Adsense (GA) là một chương trình quảng cáo được điều hành bởi Google. Ra mắt vào năm 2003, đây là một trong những...

Cách xem điểm thi tuyển sinh vào lớp 10 năm 2019 tỉnh Bình Định

Theo dự kiến điểm thi tuyển sinh vào lớp 10 năm 2019 ở Bình Định sẽ được công bố vào ngày 12/6. Thí sinh...

Dịch vụ tạo banner quảng cáo giữ chỗ miễn phí

Nếu là dân làm web thì chắc các bạn biến đến khái niệm banner quảng cáo và khi chưa có quảng cáo thì những...

Cùng chat và xem video Youtube tức thời với bạn bè trên kênh riêng

Thông thường để chia sẻ video bạn thường lấy đường dẫn của nó và gửi cho bạn bè. Nếu cách thông thường đó bạn...