Validate Form với HTML5

Cập nhật: Lượt xem: 1129 [ HTML5 ]

Hướng dẫn cách validate form trong html5, không cần sử dụng javascript mà các input vẫn được validate tự động.

Validate Form  với HTML5

Validate dữ liệu được người dùng cung cấp là điều không thể không làm. Một số dữ liệu phải được validate tại server, một số khác lại có thể validate trên  máy client. Và tất nhiên, giảm công việc cho server bấy nhiêu thì tốt bấy nhiêu, nghĩa là dù validate cho client trước. nhưng vẫn phải validate lại lần nữa trên server, tuy nhiên có sự khác biệt, giảm validate sai trên server, thì giảm số lần response lại cho user để thông báo là họ nhập sai, việc này kéo dài thời gian submit thông tin và làm khó chịu, nản lòng user.

Trước đây, khi HTML5 chưa ra đời, chúng ta validate dựa vào javascript và một vài role mà html4 cho phép. Tuy nhiên, giờ là thời đại của HTML5 với khá nhiều tính năng hữu ích cho lập trình viên. trong đó có validate, và hôm nay, chúng ta sẽ chỉ nói về cách validate trong HTML5 mà không sử dụng javascript

Kiểu dữ liệu cho Input

Để có thể validate, thì trước tiên HTML5 định nghĩa các kiểu dữ liệu cho mới cho input, có khá nhiều kiểu input mới :

  • number : input chỉ cho phép nhập số
    • thuộc tính :
      min : Giá trị nhỏ nhất
      max : Giá trị lớn nhất
      step : Giá trị sẽ nhảy mỗi lần bấm nút mũi tên
  • range : Giống một slider, cho phép chọn 1 con số trong 1 giới hạn nào đó.
    • thuộc tính tương tự như number
  • Date : input ngày tháng, có hỗ trợ một date picker
  • week, month : giống như date, nhưng ở đây chọn tuần, tháng
  • datetime , datetime-local: ngày ngày, còn có thể chọn được giờ
  • Color : chỉ cho phép nhập text dạng màu
  • datalist : Hỗ trợ tính năng autocomplete và suggestion.
  • Email : cho phép nhập email
  • url : cho phép định dạng url
  • tel : cho phép định dạng điện thoại

Cách sử dụng không khác với html4, chỉ cần đặt tên các kiểu input trên vào thuộc tính type.

Thuộc tính validate

Bên cạnh các kiểu input mới, HTML5 còn có các thuộc tính hỗ trợ validate dễ hơn.

  • novalidate : thuộc tính của form, cho phép disable việc validate cho form.
  • required : Thuộc tính của input, xác định input này nhất định phải điền
  • pattern : validate input theo mẫu, mẫu này có dạng Regular Expression.

Chúng ta sẽ nói rõ hơn về cách sử dụng các thuộc tính và kiểu input này ở những phần sau.

Bắt buộc phải nhập input

Ta có thể sử dụng thuộc tính required :

<input type="number" min="12" max="98" required/>

Giới hạn min-max của số

Có nhiều cách để giới hạn min max của số, cách đầu tiên là sử dụng kiểu number và đặt các thuộc tin min-max cho nó :

<input type="range" min="100" max="500" step="10" />

Cách thứ hai là sử dụng input kiểu range với giới hạn min max :

<input type="range" min="100" max="500" step="10" />

Giới hạn chiều dài chuỗi

Cách này không mới trong html5, nhưng cũng giới thiệu luôn cho đủ bộ, Đó là giới hạn số lượng ký tự của chuỗi input, ví dụ dưới đây chỉ cho phép nhập chuỗi có độ dài tối đa là 15 ký tự :

<input type="text" name="name" required minlength="8"  maxlength="15">

Hoặc bạn cũng có thể sử dụng regEx như sau :

<input title="8 to 15 characters" name="name" pattern=".{8,18}" required="" type="text" />

Validate email

Email là field thường dùng nhất trong các form, vì vậy việc validate nó là rất cần thiết. Đơn giản là chỉ cần sử dụng type email là đủ :

<input name="email" type="email" />

Hoặc bạn cũng có thể sử dụng regEx như sau :

<input type="text" title="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

Trong một số trường hợp, giả như bạn muốn giới hạn lại các dịch vụ email được cho phép, ví dụ như chỉ cho phép sử dụng email của google :

<input type="text" title="email" required pattern="[^@]+@gmail+\.com" />

 Validate bằng RegEx

Như các bạn thấy trong những ví dụ trên, mình đều có thể thay thế các input type bằng regEx. Các biểu thức này đều giống với trong javascript, có nghĩa là bạn có thể chuyển đổi file validate của mình từ javascript qua html5 rồi. Điều này có thể sẽ giúp đỡ bạn ít nhiều trong việc giảm bớt số lượng file javascript. cũng như có cách để validate trực tiếp và tự động trong chính form.

Các regEx này đặt trong thuộc tính pattern. có thể kết hợp thuộc tính pattern chung với type, khi đó cả hai type và pattern đều thỏa, thì người dùng mới có thể submit.

Lời kết

Như các bạn thấy đó, chúng ta có thể thay input type bằng regEx, tuy nhiên cái hay của thuộc tính type là ở chỗ khi người dùng sử dụng các thiết bị cảm ứng, điện thoại di động, thì có nhiều hệ điều hành sẽ hỗ trợ những kiểu bàn phím riêng cho từng lại input type, vì vậy mình vẫn khuyên các bạn nên sử dụng type, đồng thời kết hợp thêm regEx, như trong ví dụ với email ở trên.