Bắt lỗi để trống 1 ô inpuut html năm 2024

Cuộc đời của một ông Dev chắc hẳn ai cũng đã, đang và sẽ phải trải qua ít nhất 1 lần phải làm tới form nhập dữ liệu hay còn gọi Input nói chung. Dưới đây sẽ là một số ví dụ về HTML thực chiến đảm bảo mọi người không để lọt bugs về validation.

INPUT ATTRIBUTES

HTML cung cấp cho mình một số thuộc tính mình có thể dùng để xác định validation form. Ok tới luôn nhé các bé.

1. Pattern Cái này chỉ định biểu thức cho giá trị đầu vào cho input trước khi bạn click button submit. Pattern có thể sử dụng với 1 số kiểu đầu vào ví dụ như: text, date, tel, email, password, ...vv.
2. Title Title thì không dùng để xác thực biểu mẫu nhưng mình có thể biết thêm được về thông tin kiểu dự liệu mà mình sẽ phải nhập vào ô input.
3. Required Trường này xác định rằng ô input không được để rỗng trước khi submit.
4. MinLength & MaxLength Cái này đơn giản là độ dài tối thiểu và tối đa của giá trị đầu vào cho ô input. Nhưng cũng rất quan trọng vì nó phù hợp với những yêu cầu tương ứng.

INPUT TYPE

Sử dụng đúng input type có thể giúp xác nhận loại dữ liệu không chính xác. Dưới đây là input type bạn có thể cần để xác thực biểu mẫu của mình.

1. Email: Sử dụng type "Email" để xác thực dữ liệu dạng email để đảm bảo dữ liệu ở đúng định dạng trước khi biểu mẫu được gửi. Để check validate của email thì ta có thể thêm pattern để đảm bảo đầu ra đúng định dạng email. Ví dụ: pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"

2. Password: Cái này thì không phải giới thiệu nhiều. nhưng không thể không nhắc tới vì đây là input type ẩn mật khẩu dưới dạng dấu chấm. Tùy vào yêu cầu và độ phức tạo cho mật khẩu mà ta sử dụng pattern cho phù hợp để check điều kiện lỗi.

3. Tel: Về cơ bản thì type "Tel" giúp chúng ta xác định kiểu nhập số điện thoại. thông thường sẽ hỗ trợ hiển thị bàn phím dạng number giúp giới hạn được trường hợp người dùng nhập ký tự chữ. Theo quan điểm cá nhân thì mình sẽ không check Số điện thoại theo dạng độ dài của số điện thoại. Đơn giản mình cho nó về 1 kiểu pattern format nhất định là ok. Dưới đây là pattern cho "Tel" mình thường sử dụng.

4. Number: Cái này đơn giản là bạn kiểm tra giá trị đầu vào chỉ là số và có thể check được giá trị trong khoảng mình mong muốn.

Ví dụ trên cho thấy giá trị yêu cầu nằm trong khoảng từ 2 tới 8 và không bắt buộc.

Tổng kết về Input type thì dưới đây là một số ví dụ thường sử dụng khá tốt để check validation.

Tổng kết

Việc xác thực dữ liệu đầu vào thường sẽ do phía Server thực hiện, bởi vì để đảm bảo được rằng người dùng không thể giả mạo được dữ liệu. Ngoài ra, một số trường hợp bạn có thể kiểm tra ở phía người dùng theo các cách ở trên mình có nói. bạn có thể thêm thuộc tính novalidate hoặc custom text để hiển thị thông báo lỗi định dạng tới người dùng. Mong rằng sau bài viết này các đấng không để bị log bugs bởi những validation thông thường như này.

Nội dung

Thuộc tính value

Thuộc tính value chỉ định một giá trị khởi tạo cho phần tử input:

Ví dụ

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

Kết quả

---

Thuộc tính readonly

Thuộc tính readonly chỉ đinh phần tử input chỉ có thể đọc (không thể thay đổi dữ liệu trên phần tử đó):

Ví dụ

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

Kết quả

Thuộc tính readonly không cần khởi gán giá trị. Sẽ giống nhau nếu viết readonly=”readonly”.

---

Thuộc tính disabled

Thuộc tính disabled chỉ định trường input sẽ bị ẩn. Phần tử disabled sẽ không được sử dụng và không kích được trên nó. Các phần tử disabled sẽ không được gửi đi (submit).

Ví dụ

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

Kết quả

Thuộc tính disabled cũng không cần khởi gán giá trị. Sẽ giống nhau nếu viết disabled=”disabled”.

---

Thuộc tính size

Thuộc tính size chỉ định kích thước của trường input (số ký tự):

Ví dụ

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

Kết quả

---

Thuộc tính maxlength

Thuộc tính maxlength chỉ định độ dài tối đa cho phép của trường input:

Ví dụ

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

Kết quả

Với thuộc tính maxlength, control input sẽ không chấp nhận nhiều hơn số ký tự được cho phép. Thuộc tính này không cung cấp bất kỳ phản hồi nào khi nhập quá số ký tự cho phép. Nếu bạn muốn thông báo nhận thông báo, bạn phải viết code JavaScript.

Dùng các thuộc tính của thẻ input để giới hạn việc nhập dữ liệu là không đơn giản. JavaScript cung cấp nhiều cách để thêm vào dữ liệu không hợp lệ cho thẻ input. Để hạn chế đầu vào một cách an toàn, cũng cần phải kiểm tra dữ liệu tại nơi nhận (phía server).

---

Các thuộc tính HTML5

HTML5 thêm các thuộc tính sau cho thẻ :

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

và các thuộc tính cho thẻ

:

• autocomplete
• novalidate

---

Thuộc tính autocomplete

Thuộc tính autocomplete được sử dụng trường form hoặc input có thể tự động điền dữ liệu vào đó hay không. Khi thiết lập autocomplete = “on”, trình duyệt sẽ tự động điền giá trị dựa trên các giá trị mà người dùng đã nhập trước đây. Mách nhỏ: Cũng có thể sử dụng autocomplete là “on” cho form, và “off” cho các trường input, và ngược lại. Thuộc tính autocomplete làm việc với thẻ và các loại thẻ sau: text, search, url, tel, email, password, datepickers, range, và color.

Ví dụ

Một form HTML với autocomplete on (và có thể off cho một vài trường input):

  
  
  

  
First name:
  
Last name: 
  
E-mail: 
  
  

Nhập vào form rồi submit, sau đó load lại trang để xem cách hoạt động của autocomplete.
  
Chú ý rằng là "on" cho form, nhưng "off" cho địa chỉ email.
  
  

Kết quả

---

Thuộc tính novalidate

Thuộc tính novalidate là một thuộc tính của

. Sử dụng novalidate khi dữ liệu trong form không cần phải kiểm tra tính hợp lệ khi gửi đi (submit).

Ví dụ

  
  
  

  
E-mail:   
  

Chú ý: Thuộc tính novalidate của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE hoặc trong Safari.
  
  

Kết quả

---

Thuộc tính autofocus

Thuộc tính autofocus là một thuốc tính boolean. Khi xuất hiện nó chỉ định rằng một phần tử nhận focus khi trang được load.

Ví dụ

Trường “First name” sẽ tự động nhận con trỏ nhấp nháy khi trang được load:

  
  
  

  
First name:
  
Last name: 
  
  

Chú ý: Thuộc tính autofocus của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.
  
  

Kết quả

---

Thuộc tính form

Thuộc tính form form để chỉ định một hay nhiều form mà chứa phần tử này. Mách nhỏ: Để ám chỉ nhiều hơn một form, sử dụng khoảng trắng để phân tách danh sách các id của form.

Ví dụ

Trường Last name được đặt bên ngoài form HTML (nhưng vẫn là một phần của form):

  
  
  

  
First name: 
  
  

Trường "Last name" bên dưới là ở bên ngoài phần tử form nhưng nó vẫn là một phần của form.
  
Last name: 
  
  

Kết quả

Last name:

---

Thuộc tính formaction

Thuộc tính formaction chỉ định tới đường dẫn của một file mà sẽ xử lý dữ liệu của các control input khi form được submit. Thuộc tính formaction viết chồng với thuộc tính action của phần tử

. Thuộc tính formaction được sử dụng cho các thẻ input kiểu type=”submit” và type=”image”.

Ví dụ

Một form HTML với hai nút submit, thực hiện hai hành động khác nhau:

  
  
  

  
First name: 
  
Last name: 
  

  
  

Chú ý: Thuộc tính formaction của thẻ input không hỗ trợ trong Internet Explorer 9 và các phiên bản cũ hơn của IE.
  
  

Kết quả

---

Thuộc tính formenctype

Thuộc tính formenctype xác định cách dữ liệu form nên được mã hoá khi gửi dữ liệu tới server (chỉ cho form với method=”post”). Thuộc tính formenctype viết chồng với thuộc tính enctype của thẻ

. Thuộc tính formenctype được sử dụng với các thẻ input kiểu type=”submit” và type=”image”.

Ví dụ

Gửi dữ liệu của form với mã hoá mặc định (cho nút submit thứ nhất) và mã hoá kiểu “multipart/form-data” (cho nút submit thứ hai):

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

0

Kết quả

---

Thuộc tính formmethod

Thuộc tính formmethod định nghĩa phương thức HTTP cho gửi dữ liệu của form tới một URL thực hiện nó (đường dẫn file chứa code server). Thuộc tính formmethod viết chồng thuộc tính method của phần tử

. Thuộc tính formmethod có thể được sử dụng với kiểu type=”submit” and type=”image”.

Ví dụ

Nút submit thứ hai viết chồng method HTTP của form:

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

1

Kết quả

---

Thuộc tính formnovalidate

Thuộc tính novalidate là một thuộc tính kiểu boolean. Khi xuất hiện trong phần tử thì phần tử đó sẽ không bị kiểm tra tính hợp lệ khi gửi dữ liệu. Thuộc tính formnovalidate viết chồng thuộc tính novalidate của phần tử

. Thuộc tính formnovalidate có thể được sử dụng với thẻ kiểu type=”submit”.

Ví dụ

Một form với hai nút submit (với việc có và không có kiểm tra dữ liệu hợp lệ):

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

2

Kết quả

---

Thuộc tính formtarget

Thuộc tính formtarget chỉ định một tên hoặc một từ khoá mà cho biết nơi để hiển thị kết quả khi nhận được sau khi submit form. Thuộc tính formtarget viết đề thuộc tính target của phần tử

. Thuộc tính formtarget có thể được sử dụng với thẻ kiểu type=”submit” và type=”image”.

Ví dụ

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

3

Kết quả

---

Thuộc tính height và width

Thuộc tính height và width chỉ định chiều rộng và cao của phần tử . Thuộc tính height và width chỉ được sử dụng với .

Luôn luôn chỉ định kích thước của ảnh. Nếu trình duyệt không biết kích thước, trang nhấp nháy khi loạt các ảnh.

Ví dụ

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

4

Kết quả

---

---

Thuộc tính list

Thuộc tính list tham chiếu đến phần tử

Ví dụ

Phần tử với các giá trị định nghĩa trước trong một

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

5

Kết quả

---

Thuộc tính min và max

Thuộc tính min và max xác định giá trị nhỏ nhất và lớn nhất cho một phần tử . Các thuộc tính min và max làm việc với các kiểu thẻ sau: number, range, date, datetime, datetime-local, month, time and week.

Ví dụ

Các phần tử với các giá trị min và max, xem lại bài 27:

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

6

Kết quả

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

---

Thuộc tính multiple

Thuộc tính multiple là một thuộc tính kiểu boolean. Khi xuất hiện, phần tử sẽ cho người sử dụng nhập hơn một giá trị trong phần tử. Thuộc tính multiple làm việc với các kiểu input sau: email và file.

Ví dụ

Một trường upload file chấp nhận nhiều giá trị:

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

7

Kết quả

Select images:

---

Thuộc tính pattern

Thuộc tính pattern chỉ định một biểu thức chính quy (regular expression) mà giá trị của phần tử sẽ được kiểm tra lại. Thuộc tính pattern làm việc với các loại thẻ sau: text, search, url, tel, email, và password. Mách nhỏ: Sử dụng thuộc tính title để trợ giúp thông tin pattern cho người sử dụng.

Ví dụ

Một trường input có thể chỉ chứa 3 ký tự (không phải kiểu số hoặc các ký tự đặc biệt):

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

8

Kết quả

Country code:

---

Thuộc tính placeholder

Thuộc tính placeholder xác định một gợi ý mà miêu tả giá trị mong đợi cho trường input (một giá trị ví dụ hoặc một mô tả ngắn của định dạng). Gợi ý này được hiển thị trong trường input trước khi người sử dụng nhập giá trị vào đó. Thuộc tính placeholder làm việc với các thẻ kiểu: text, search, url, tel, email, and password.

Ví dụ

Một trường input với mô tả ngắn trong placeholder:

  
  
  

  
First name:
  
  

  
Last name:
  
  

  
  

9

Kết quả

---

Thuộc tính required

Thuộc tính required là một thuộc tính kiểu boolean. Khi xuất hiện nó xác định rằng trường input không được để trống trước khi submit form. Thuộc tính required làm việc với thẻ kiểu: text, search, url, tel, email, password, date pickers, number, checkbox, radio, và file.