Ràng buộc dữ liệu input với HTML5

Với HTML5 chúng ta có một số kiểu input để validate những giá trị mà user đưa vào, ko cần tự viết javascript để check, chỉ đơn giản là khai báo mấy cái attribute, trường hợp phức tạp hơn, chúng ta có thể can thiệp trong cái Validation API để có kết quả mong muốn

Luôn nhớ validate ở phía client không có nghĩa là ko cần đến validate ở server.

Một vài ràng buộc phổ biến

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

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>

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

Giới hạn file size khi upload

<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 > 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;
}

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;
}

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

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!');
  }
});

Constraint validation

Bài viết gốc được đăng tải tại vuilaptrinh.com

Có thể bạn quan tâm:

• Chỉ dẫn thiết kế form từ Google
• Stateless là gì? Stateful là gì?
• Tìm hiểu validate form với HTML5

Xem thêm các việc làm Developer hấp dẫn tại TopDev