ValidityState: thuộc tính valid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thuộc tính chỉ đọc valid của giao diện ValidityState chỉ ra liệu giá trị của phần tử <input> có đáp ứng tất cả các ràng buộc xác thực của nó hay không, và do đó được coi là hợp lệ.

Nếu true, phần tử khớp với lớp giả CSS :valid; ngược lại lớp giả CSS :invalid được áp dụng.

Giá trị

Một giá trị boolean là true nếu ValidityState tuân theo tất cả các ràng buộc.

Ví dụ sau kiểm tra tính hợp lệ của phần tử nhập số. Một ràng buộc đã được thêm bằng cách sử dụng thuộc tính min đặt giá trị tối thiểu là 18 cho đầu vào. Nếu người dùng nhập bất kỳ giá trị nào không phải số lớn hơn 17, phần tử thất bại xác thực ràng buộc, và các kiểu khớp với input:invalid được áp dụng.

css

input:invalid {
  outline: red solid 3px;
}
input:valid {
  outline: palegreen solid 3px;
}

body {
  margin: 0.5rem;
}
pre {
  padding: 1rem;
  height: 2rem;
  background-color: lightgrey;
  outline: 1px solid grey;
}

html

<pre id="log">Validation logged here...</pre>
<input type="number" id="age" min="18" required />

const userInput = document.getElementById("age");
const logElement = document.getElementById("log");

function log(text) {
  logElement.innerText = text;
}

userInput.addEventListener("input", () => {
  userInput.reportValidity();
  if (userInput.validity.valid) {
    log("Input OK…");
  } else {
    log("Bad input detected…");
  }
});