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

Binance Launchpad có dễ… húp như bạn tưởng

Tiền kỹ thuật số (cryptocurrency) đang dần mở rộng. Kể ra mình biết khái niệm này từ rất lâu. Nếu các bạn là độc...

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

BẠN XEM CHƯA

Cảnh báo lỗ hổng bảo mật của DotNetNuke

Mới đây trong một bức thư gửi đến khách hàng của mình DotNetNuke (DNN) đã cảnh báo về một lỗ hổng bảo mật nguy...

EA Origin tồn tại lỗ hổng bảo mật: 300 triệu người dùng bị ảnh hưởng

Gần đây, các chuyên gia bảo mật từ Check Point Research và CyberInt đã tiết lộ một lỗ hổng từ dịch vụ EA Origin....

Tắt “tai thỏ” trên một số smartphone Android đời mới

Sau khi Apple tung ra chiếc điện thoại iPhone X với màn hình có vùng khuyết màu đen ở sát cạnh trên của màn...

MinervaKB – Giao diện WordPress cho chuyên trang hỗ trợ

Nếu bạn là nhà phát triển web nhất là khi làm việc với API các dịch vụ thì chắc hẳn phải đôi lần bạn...

Hướng dẫn cài đặt Ubuntu và XAMPP PHP Server trên Google Cloud VM

Google Cloud Platform (GCP) là một hệ thống các dịch vụ điện toán đám mây của Google. Google Cloud Platform gồm các dịch vụ...