Kiểm tra form hợp lệ với HTML5 hoặc Javascript

Việc kiểm tra form hợp lệ là điều cần thiết trước khi gửi dữ liệu để phòng tránh việc người dùng gửi form mà không điền hoặc điền sai định dạng dữ liệu mà chúng ta mong muốn. Do đó, bài viết này LTKK sẽ hướng dẫn các bạn cách đơn giản nhất để kiểm tra form hợp lệ trước khi cho phép gửi form.

Bài viết sẽ tập trung vào các vấn đề sau đây:

  • Kiểm tra tính hợp lệ của form theo cách đơn giản nhất, kiểm tra các trường không được phép rỗng sử dụng Javascript thuần thúy.
  • Kiểm tra form hợp lệ với các ràng buộc email, số điện thoại,… phải đúng định dạng, sử dụng javascript. Yêu cầu bạn cần biết về regex (regular expression) và cách sử dụng regex trong JS.
  • Kiểm tra tính hợp lệ của form sử dụng HTML5
  • Kiểm tra form hợp lệ với các ràng buộc email, số điện thoại,… phải đúng định dạng, sử dụng jQuery (thư viện). Cách này thì gọi các hàm có sẵn của thư viện thôi, khá đơn giản. Nếu muốn biết bên trong nó làm gì thì quay lại vấn đề ngay trên.
Cách kiểm tra form hợp lệ với HTML5, Javascript
Bài viết sẽ trình bày cách kiểm tra form hợp lệ với HTML5, Javascript hoặc jQuery.

Kiểm tra form hợp lệ cơ bản

Trong phần này, mình sẽ hướng dẫn các bạn cách kiểm tra người dùng nhập form có đầy đủ hay không bằng cách kiểm tra cách trường bắt buộc có được điền nội dung hay bị bỏ trống. Nếu phần nội dung bắt buộc bị bỏ trống thì sẽ có cảnh báo với người dùng.

Code cho file index.html

Và source kiểm tra form hợp lệ với Javascript như sau:

Và đây là thành quả của chúng ta:

- Bài viết liên quan dành cho bạn -

See the Pen
PoNvGGO
by Hieu Nguyen (@hieunv1996)
on CodePen.

Kiểm tra form hợp lệ nâng cao

Khác với phần trước, demo dưới đây yêu cầu các trường tùy chỉnh phải đúng với định dạng của nó. Ví dụ như email thì phải đúng định dạng, số điện thoại thì phải có ít hơn 11 số, …

Để làm được điều này với Javascript mà không dùng bất cứ thư viện hỗ trợ nào, chúng ta cần nhờ tới sự giúp đỡ của regex trong javascript.

Ví dụ dưới đây giúp bạn kiểm tra 1 email nhập vào có hợp lệ hay không.

Kiểm tra email hợp lệ với Javascript

Code HTML:

Code CSS (thêm cho đẹp thôi):

Code javascript:

  • regex dưới đây sẽ check xem email có thỏa mãn các điều kiện:
    • bắt đầu bằng chữ cái
    • phần username của email phải dài hơn 1 ký tự và chỉ được có chữ cái, số, dấu chấm hoặc ký tự $, _
    • email phải có @ và có kết thúc là đuôi tên miền (.com, .vn, …) Ở đây đuôi tên miền là bất kỳ được tạo thành từ \w+: a-z, A-Z, 0-9 và _

Và đây là thành quả, các bạn có thể thử nghiệm bằng cách nhập email, hoặc bất kỳ thứ gì rồi nhấp chuột vào vị trí ngoài hộp input nhé, vì mình dùng event onfocusout mà.

See the Pen
RegEx Email Validation
by Hieu Nguyen (@hieunv1996)
on CodePen.

Validate số điện thoại với JS

Để kiểm tra số điện thoại có hợp lệ hay không, chúng ta cũng có thể sử dụng cách tương tự cách kiểm tra email hợp lệ phia trên.

Code HTML:

Code CSS:

Code Javascript kiểm tra số điện thoại hợp lệ

Giải thích:

regExp phía trên sẽ khớp chuỗi số, bắt đầu là số 0, tiếp sau đó là 1 trong các số 2, 3 hoặc 4, sau đó là 8 số bất kỳ để đủ 10 số. Hoặc khớp số tổng đài có 8 chữ số bắt đầu là 1800/1900.

Kết quả của chúng ta, bạn có thể xem demo trực tiếp tại đây nhé.

See the Pen
regex phone validator
by Hieu Nguyen (@hieunv1996)
on CodePen.

Bắt lỗi form bằng HTML5

Sử dụng HTML5 để bắt lỗi khá đơn giản, chúng ta chỉ việc chỉ định kiểu dữ liệu cho thẻ input qua thuộc tính type (email, tel, date, number, url) kèm thuộc tính required để kiểm tra trước khi submit. Trong trường hợp bạn muốn custom cách kiểm tra theo ý mình, sử dụng regex vào thuộc tính pattern là ngon nghẻ.

Mình có 1 ví dụ tổng hợp dưới đây, có các chức năng kiểm tra sau:

  • Kiểm tra trường Name phải nhập, chỉ được nhập các chữ cái tiếng Việt, tiếng anh, dấu cách và 1 số ký tự đặc biệt.
  • password phải nhập tối thiểu 8 ký tự
  • email phải nhập đúng
  • SĐT phải nhập đúng như ví dụ kiểm tra hợp lệ ở ví dụ trên
  • Nhập đúng url website bắt đầu là http
  • Nhập date trong phạm vi tùy chỉnh
  • Nhập tối đa 5 ký tự, dùng pattern để tạo kiểm tra tùy chỉnh theo ý mình
  • Chỉ cho phép nhập số có 4 chữ số, dùng pattern để tạo kiểm tra tùy chỉnh theo ý mình

Code HTML:

Code CSS:

Và thành quả kiểm tra form hợp lệ với HTML5 đây rồi. Các bạn có thể trải nghiệm thử luôn: Link demo online

See the Pen
Validating form using html5 patterns and input types
by Hieu Nguyen (@hieunv1996)
on CodePen.

Validate form với jQuery

Để sử dụng chức năng validate của jquery, chúng ta sẽ cần bổ sung sử dụng thư viện jquery validate:

Dưới đây là một ví dụ minh họa sử dụng jQuery để kiểm tra thông tin form:

Code HTML:

Code CSS:

Code JS:

Và đây là thành quả của chúng ta:

See the Pen
jQuery Validation
by Hieu Nguyen (@hieunv1996)
on CodePen.

Hi vọng bài viết giúp ích cho bạn đọc được nhiều kiến thức liên quan tới việc kiểm tra form hợp lệ sử dụng Javascript/jQuery theo các cách khác nhau. Qua đó chắc các bạn cũng hiểu được bản chất cách mà thư viện hoạt động. Mọi thắc mắc liên quan tới bài học, bạn có thể để lại bình luận cuối bài hoặc đặt câu hỏi tại group Lập Trình Không Khó. Hẹn gặp lại các bạn ở bài học sau!

Subscribe
Notify of
guest
0 Bình luận
Inline Feedbacks
View all comments