Using HTML form validation and the Constraint Validation API

Ràng buộc nội tại và cơ bản

Trong HTML, các ràng buộc cơ bản được khai báo theo hai cách:

• Bằng cách chọn giá trị ngữ nghĩa phù hợp nhất cho thuộc tính type của phần tử <input>, ví dụ, chọn loại email tự động tạo ra một ràng buộc kiểm tra xem giá trị có phải là địa chỉ email hợp lệ hay không.
• Bằng cách đặt giá trị trên các thuộc tính liên quan đến xác thực, cho phép mô tả các ràng buộc cơ bản mà không cần JavaScript.

Loại input ngữ nghĩa

Các ràng buộc nội tại cho thuộc tính type là:

Đối với loại input email, nếu thuộc tính multiple được đặt, có thể đặt nhiều giá trị dưới dạng danh sách phân cách bởi dấu phẩy. Nếu bất kỳ giá trị nào trong danh sách không thỏa mãn điều kiện được mô tả ở đây, vi phạm ràng buộc Type mismatch sẽ được kích hoạt.

Lưu ý rằng hầu hết các loại input không có ràng buộc nội tại, vì một số bị ngăn khỏi constraint validation hoặc có thuật toán làm sạch chuyển đổi các giá trị không đúng sang giá trị mặc định đúng.

Thuộc tính liên quan đến xác thực

Ngoài thuộc tính type được mô tả ở trên, các thuộc tính sau được sử dụng để mô tả các ràng buộc cơ bản:

Quy trình constraint validation

Constraint validation được thực hiện thông qua Constraint Validation API trên một phần tử biểu mẫu đơn lẻ hoặc ở mức độ biểu mẫu, trên chính phần tử <form>. Constraint validation được thực hiện theo các cách sau:

• Bằng một lệnh gọi đến phương thức checkValidity() hoặc reportValidity() của interface DOM liên quan đến biểu mẫu, (HTMLInputElement, HTMLSelectElement, HTMLButtonElement, HTMLOutputElement hoặc HTMLTextAreaElement), chỉ đánh giá các ràng buộc trên phần tử này, cho phép script lấy thông tin này. Phương thức checkValidity() trả về Boolean cho biết giá trị của phần tử có vượt qua các ràng buộc của nó hay không. (Điều này thường được thực hiện bởi user-agent khi xác định pseudo-class CSS nào, :valid hay :invalid, áp dụng.) Ngược lại, phương thức reportValidity() báo cáo bất kỳ sự cố ràng buộc nào cho người dùng.
• Bằng một lệnh gọi đến phương thức checkValidity() hoặc reportValidity() trên interface HTMLFormElement.
• Bằng cách gửi chính biểu mẫu.

Gọi checkValidity() được gọi là tĩnh để xác thực các ràng buộc, trong khi gọi reportValidity() hoặc gửi biểu mẫu được gọi là tương tác để xác thực các ràng buộc.

Các ràng buộc phức tạp sử dụng Constraint Validation API

Sử dụng JavaScript và Constraint API, có thể triển khai các ràng buộc phức tạp hơn, ví dụ, các ràng buộc kết hợp nhiều trường, hoặc các ràng buộc liên quan đến các phép tính phức tạp.

Về cơ bản, ý tưởng là kích hoạt JavaScript trên một số sự kiện trường biểu mẫu (như onchange) để tính toán xem ràng buộc có bị vi phạm hay không, và sau đó sử dụng phương thức field.setCustomValidity() để đặt kết quả của việc xác thực: một chuỗi rỗng có nghĩa là ràng buộc được thỏa mãn, và bất kỳ chuỗi nào khác có nghĩa là có một lỗi và chuỗi này là thông báo lỗi để hiển thị cho người dùng.

Ràng buộc kết hợp nhiều trường: Xác thực mã bưu chính

Định dạng mã bưu chính thay đổi theo từng quốc gia. Nhiều quốc gia cho phép tiền tố tùy chọn với mã quốc gia (như D- ở Đức, F- ở Pháp, và CH- ở Thụy Sĩ). Một số quốc gia chỉ sử dụng số cố định trong mã bưu chính, trong khi các quốc gia khác, như Anh, có các định dạng phức tạp hơn cho phép chữ cái ở một số vị trí cụ thể.

Ví dụ, chúng ta sẽ thêm một script kiểm tra constraint validation cho một biểu mẫu:

<form>
  <label for="postal-code">Postal Code: </label>
  <input type="text" id="postal-code" />
  <label for="country">Country: </label>
  <select id="country">
    <option value="ch">Switzerland</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="nl">The Netherlands</option>
  </select>
  <input type="submit" value="Validate" />
</form>

Điều này hiển thị biểu mẫu sau:

Đầu tiên, chúng ta viết một hàm kiểm tra chính ràng buộc:

const countrySelect = document.getElementById("country");
const postalCodeField = document.getElementById("postal-code");

function checkPostalCode() {
  // For each country, defines the pattern that the postal code has to follow
  const constraints = {
    ch: [
      "^(CH-)?\\d{4}$",
      "Swiss postal codes must have exactly 4 digits: e.g. CH-1950 or 1950",
    ],
    fr: [
      "^(F-)?\\d{5}$",
      "French postal codes must have exactly 5 digits: e.g. F-75012 or 75012",
    ],
    de: [
      "^(D-)?\\d{5}$",
      "German postal codes must have exactly 5 digits: e.g. D-12345 or 12345",
    ],
    nl: [
      "^(NL-)?\\d{4}\\s*([A-RT-Z][A-Z]|S[BCE-RT-Z])$",
      "Dutch postal codes must have exactly 4 digits, followed by 2 letters except SA, SD and SS",
    ],
  };

  // Read the country id
  const country = countrySelect.value;

  // Build the constraint checker
  const constraint = new RegExp(constraints[country][0], "");
  console.log(constraint);

  // Check it!
  if (constraint.test(postalCodeField.value)) {
    // The postal code follows the constraint, we use the ConstraintAPI to tell it
    postalCodeField.setCustomValidity("");
  } else {
    // The postal code doesn't follow the constraint, we use the ConstraintAPI to
    // give a message about the format required for this country
    postalCodeField.setCustomValidity(constraints[country][1]);
  }
}

Sau đó chúng ta liên kết nó với sự kiện change cho <select> và sự kiện input cho <input>:

countrySelect.addEventListener("change", checkPostalCode);
postalCodeField.addEventListener("input", checkPostalCode);

Giới hạn kích thước tệp trước khi tải lên

Một ràng buộc phổ biến khác là giới hạn kích thước tệp được tải lên. Kiểm tra điều này ở phía client trước khi tệp được truyền đến server yêu cầu kết hợp Constraint Validation API, và đặc biệt là phương thức field.setCustomValidity(), với một API JavaScript khác, ở đây là File API.

Đây là phần HTML:

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

Điều này hiển thị:

JavaScript đọc tệp được chọn, sử dụng phương thức File.size() để lấy kích thước của nó, so sánh với giới hạn (được hardcode), và gọi Constraint API để thông báo cho trình duyệt nếu có vi phạm:

const fs = document.getElementById("fs");

function checkFileSize() {
  const files = fs.files;

  // If there is (at least) one file selected
  if (files.length > 0) {
    if (files[0].size > 75 * 1000) {
      // Check the constraint
      fs.setCustomValidity("The selected file must not be larger than 75 kB");
      fs.reportValidity();
      return;
    }
  }
  // No custom constraint violation
  fs.setCustomValidity("");
}

Cuối cùng, chúng ta hook phương thức với sự kiện đúng:

fs.addEventListener("change", checkFileSize);

Tạo kiểu trực quan cho constraint validation

Ngoài việc đặt các ràng buộc, các nhà phát triển web muốn kiểm soát những thông báo nào được hiển thị cho người dùng và cách chúng được tạo kiểu.

Kiểm soát giao diện của các phần tử

Giao diện của các phần tử có thể được kiểm soát thông qua các pseudo-class CSS.

Pseudo-class CSS :required và :optional

Các pseudo-class :required và :optional cho phép viết các selector khớp với các phần tử biểu mẫu có thuộc tính required, hoặc không có nó.

Pseudo-class CSS :placeholder-shown

Xem :placeholder-shown.

Pseudo-class CSS :valid :invalid

Các pseudo-class :valid và :invalid được sử dụng để biểu diễn các phần tử <input> có nội dung xác thực và không xác thực tương ứng theo cài đặt loại của input. Các lớp này cho phép người dùng tạo kiểu cho các phần tử biểu mẫu hợp lệ hoặc không hợp lệ để giúp dễ nhận biết các phần tử được định dạng đúng hoặc sai.

Kiểm soát văn bản của vi phạm ràng buộc

Các mục sau có thể giúp kiểm soát văn bản của vi phạm ràng buộc:

• Phương thức setCustomValidity(message) trên các phần tử sau:

  • <fieldset>. Lưu ý: Đặt thông báo hợp lệ tùy chỉnh trên các phần tử fieldset sẽ không ngăn việc gửi biểu mẫu trong hầu hết các trình duyệt.
  • <input>
  • <output>
  • <select>
  • Các nút submit (được tạo bằng phần tử <button> với loại submit, hoặc phần tử input với loại submit. Các loại nút khác không tham gia vào constraint validation.
  • <textarea>

• Interface ValidityState mô tả đối tượng được trả về bởi thuộc tính validity của các loại phần tử được liệt kê ở trên. Nó biểu diễn các cách khác nhau mà một giá trị được nhập có thể không hợp lệ. Kết hợp với nhau, chúng giúp giải thích lý do tại sao giá trị của một phần tử không xác thực được, nếu nó không hợp lệ.