Phương thức checkValidity() trong HTML5

checkValidity() là phương thức của Constraint Validation API, kiểm tra xem một element form có thỏa mãn các ràng buộc xác thực (required, pattern, min, max, type...) hay không. Trả về true (hợp lệ) hoặc false (không hợp lệ).

Ví dụ hoàn chỉnh: Kiểm tra real-time khi nhập

<!DOCTYPE html>
<html>
  <body>
    <style>
      .valid { color: #0B7866; }
      .invalid { color: #0B6877; }
    </style>
    <div id="result"></div>
    <script>
      function check(input) {
        var out = document.getElementById('result');
        if (input.validity) {
          if (input.validity.valid) {
            out.innerHTML = "<span class='valid'>" + input.id + " hợp lệ</span>";
          } else {
            out.innerHTML = "<span class='invalid'>" + input.id + " KHÔNG hợp lệ</span>";
          }
        }
        console.log('checkValidity():', input.checkValidity());
      }
    </script>
    <form id="testform" onsubmit="return false;">
      <label>Số nhỏ nhất 4: 
        <input oninput="check(this)" id="min_input" type="number" min="4" />
      </label><br>
    </form>
  </body>
</html>

Đối tượng validity (ValidityState)

Chi tiết lý do không hợp lệ:

• valueMissing: Thiếu giá trị (required).
• typeMismatch: Sai type (email, url).
• patternMismatch: Không khớp pattern.
• tooLong / tooShort: Vượt minlength/maxlength.
• rangeUnderflow / rangeOverflow: Nhỏ hơn min / lớn hơn max.
• stepMismatch: Không khớp step.
• badInput: Dữ liệu không parse được (ví dụ chữ trong type=number).

Hỗ trợ trình duyệt

Hỗ trợ tốt trên Chrome, Firefox, Edge, Safari, Opera (từ IE10+). Không hỗ trợ IE9-.

Ứng dụng

• Validate real-time khi user nhập (oninput).
• Kiểm tra toàn bộ form trước submit: form.checkValidity().
• Tùy chỉnh UI lỗi thay vì dùng bubble mặc định.