Thuộc tính sự kiện oninvalid trong HTML

Thuộc tính sự kiện oninvalid trong HTML được kích hoạt khi một trường nhập liệu (input field) không hợp lệ trong khi submit biểu mẫu trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

<tagname oninvalid="script"></tagname>

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính sự kiện oninvalid trong HTML:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      color: #000;
      height: 100vh;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
      text-align: center;
      padding: 20px;
    }
    textarea {
      border: 2px solid #fff;
      background: transparent;
      font-size: 1rem;
    }
    ::placeholder {
      color: #000;
      font-size: 1rem;
    }
    .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
    }
  </style>
</head>
<body>
<h1>Demo thuộc tính sự kiện oninvalid trong HTML</h1>
<form action="" method="">
  <textarea placeholder="Nhập tin nhắn của bạn ở đây" oninvalid="invalidFn()" rows='8' cols="50" required></textarea>
  <input type="submit" value="GỬI" class="btn">
</form>
<p>Nhấn nút GỬI mà không viết tin nhắn nào</p>
<script>
  function invalidFn() {
    document.querySelector('textarea').style.background = '#db133a6e';
    document.querySelector('textarea').setAttribute('placeholder', 'Vui lòng nhập tin nhắn');
  }
</script>
</body>
</html>

Kết quả

Nhấn vào nút "GỬI" mà không nhập tin nhắn nào vào khu vực văn bản và quan sát cách thuộc tính oninvalid hoạt động: