Một số Input type và những mẹo hữu ích về Validation Form trong HTML

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="text" minlength="4" required>

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. 

  <input type="password" pattern="(?=.*[a-z]).{6}" title="Phải có ít nhất 6 ký tự và tối thiểu 1 chữ thường">

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.

  <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="Số điện thoại format theo kiểu +99(99)9999-9999">

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.

  <input type="number" min="2" max="8">

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.

  <form id="form" autocomplete>
    <input type="text" minlength="4" required>
    <input type="email" required>
    <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" 
     title="Phone Number format is +99(99)9999-9999" required>
    <input type="password" pattern="(?=.*[a-z]).{6}" 
     title="Must be 6 characters or more and 
     contain at least 1 lower case letter" required>
  </form>

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.

Thanks!

Read next