Top 2 cách ràng buộc dữ liệu trong HTML5 mà lập trình viên nào cũng phải biết

Bảo Phong -Developer Follow Author

Trước khi HTML5 ra đời, nếu chúng ta dùng HTML làm 1 form thì phải viết Javascript để ràng buộc dữ liệu. Nhưng bây giờ, chỉ cần các Attribute đơn giản trong HTML5 thì chúng ta đã có các thẻ input validate đa dạng yêu cầu.

HTML5 giúp code sạch hơn – đẹp hơn – ít code hơn.

Top 1: Một vài validate phổ biến nhất trong HTML5

Khi dùng kiểu input <input type=”email” />: bắt buộc là giá trị email <input type="url" />: bắt buộc là giá trị url

Dùng attribute khác

Attribute	Kiểu input hỗ trợ	Giải thích
`pattern`	text, search, url, tel, email, password	phải khớp với giá trị regular expression
`min`	range, number, date, month, week, datetime, datetime-local, time	giá trị phải lớn hơn hoặc bằng giá trị `min`
`max`	range, number, date, month, week, datetime, datetime-local, time	giá trị phải nhỏ hơn hoặc bằng giá trị `max`
`required`	text, search, url, tel, email, password, date, datetime, datetime-local, month, week, time, number, checkbox, radio, file, select, textarea	bắt buộc phải có giá trị
`minlength`	text, search, url, tel, email, password, textarea	số ký tự nhập vào phải thỏa lớn hơn hoặc bằng `minlength`
`maxlength`	text, search, url, tel, email, password, textarea	số ký tự nhập vào phải thỏa nhỏ hơn hoặc bằng `maxlength`

Ví dụ

<form>
  <label for="name">Enter username (upper and lowercase letters): </label>
  <input type="text" name="name" id="name" required pattern="[A-Za-z]+">
  <button>Submit</button>
</form>

<form>

<label for="name">Enter username (upper and lowercase letters): </label>

<button>Submit</button>

</form>

Quá trình validate dữ liệu

Quá trình này sẽ thông qua bộ Validation API, nó có thể là trên cả form hoặc trên từng element trong form. Được thực hiện bằng một trong các cách sau bằng cách gọi checkValidity() của các element input, select, button, textarea. Nó sẽ chỉ validate dữ liệu trên element đó thôi. Nó thường được thực hiện bởi trình duyệt, sau đó chúng ta dùng selector của CSS là :valid và :invalid để format gọi checkValidity() hoặc reportValidity() trên thằng form Khi form được submit bằng click ‘hoặc ‘<button type=’submit’ /> hoặc ấn enter

Lưu ý

Nếu set novalidate trên thẻ <form novalidate />, là chúng ta bỏ qua hết việc validate
Khi gọi submit() trên form, không trigger validation, phương thức này sẽ gửi hết dữ liệu của form lên server dù nó có hay không thỏa điều kiện. Nên gọi sự kiện click() của nút submit

Can thiệp vào quá trình validate bằng bộ Validation API

Ý tưởng chính là bắt một sự kiện nào đó trên element như onchange, rồi trigger một đoạn javascript để validate, sau đó dùng phương thức field.setCustomValidity() để set kết quả validate: nếu là String rỗng nghĩa là ok, còn ngược lại là error, đoạn string này sẽ đem đi hiển thị như thông báo error cho user.

Xem Thêm : HTML5 là gì?

Đây là phiên bản thứ 5 của ngôn ngữ HTML, được giới thiệu bởi World Wide Web Consortium (W3C). HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML và bổ sung thêm các đặc tả nổi trội của XHTML, bổ sung thêm các tag rất hay có thể sử dụng Canvas với kiểu bitmap hoặc SVG với kiểu vector, DOM cấp 2, đặc biệt là JavaScript.

Top 2: Giới hạn file size khi upload

&lt;label for="FS"&gt;Select a file smaller than 75 kB : &lt;/label&gt;
&lt;input type="file" id="FS"&gt;

1 2	<label for="FS">Select a file smaller than 75 kB : </label> <input type="file" id="FS">

Dùng javascript để đọc file được chọn, FIle.size(), so sánh kích thước này rồi trả về kết quả cho trình duyệt

function checkFileSize() {
  var FS = document.getElementById("FS");
  var files = FS.files;

  // Nếu có ít nhất 1 file được chọn
  if (files.length &gt; 0) {
     if (files&#91;0].size &gt; 75 * 1024) { // kiểm tra size
       FS.setCustomValidity("The selected file must not be larger than 75 kB");
       return;
     }
  }
  // Không có file, ko check.
  FS.setCustomValidity("");
}

function checkFileSize() {

var FS = document.getElementById("FS");

var files = FS.files;

// Nếu có ít nhất 1 file được chọn

if (files.length > 0) {

if (files[0].size > 75 * 1024) { // kiểm tra size

FS.setCustomValidity("The selected file must not be larger than 75 kB");

return;

}

// Không có file, ko check.

FS.setCustomValidity("");

}

Hook cái phương thức này vào trong sự kiện mong muốn

window.onload = function () {
  document.getElementById("FS").onchange = checkFileSize;
}

window.onload = function () {

document.getElementById("FS").onchange = checkFileSize;

}

CSS Hiển thị validation

Dùng :required và :optional để trỏ đến các element nào có thuộc tính required hoặc không

input:required {
    border: red;
}
input:optional {
    border: blue;
}

input:required {

border: red;

}

input:optional {

border: blue;

}

:valid và :invalid trên các element bị/không bị lỗi

input:valid {
    border: black;
}
input:invalid {
    border: red;
}

input:valid {

border: black;

}

input:invalid {

border: red;

}

Để thay đổi nội dung câu thông báo, sử dụng element.setCustomValidity('thông báo') trên các element: <fieldset>, <input>, <output>, <select>, <button>, <textarea>

const nameInput = document.querySelector('input');
const form = document.querySelector('form');

nameInput.addEventListener('input', () => {
  nameInput.setCustomValidity('');
  nameInput.checkValidity();
});

nameInput.addEventListener('invalid', () => {
  if(nameInput.value === '') {
    nameInput.setCustomValidity('Enter your username!');
  } else {
    nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');
  }
});

const nameInput = document.querySelector('input');

const form = document.querySelector('form');

nameInput.addEventListener('input', () => {

nameInput.setCustomValidity('');

nameInput.checkValidity();

});

nameInput.addEventListener('invalid', () => {

if(nameInput.value === '') {

nameInput.setCustomValidity('Enter your username!');

} else {

nameInput.setCustomValidity('Usernames can only contain upper and lowercase letters. Try again!');

}

});

Lời kết:

Trên đây Share Code Website đã giới thiệu cho các bạn Top 2 cách ràng buộc dữ liệu trong HTML5 mà lập trình viên nào cũng phải biết và quy trình để ràng buộc dữ liệu trong HTML5 của 1 form input căn bản nhất.