การดำเนินการสคริปต์เมื่อองค์ประกอบไม่ถูกต้อง (Invalid) ใน HTML

เพื่อดำเนินการสคริปต์เมื่อองค์ประกอบไม่ถูกต้องใน HTML ให้ใช้แอตทริบิวต์ oninvalid

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ oninvalid:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML oninvalid attribute</title>
  </head>
  <body>
    <h2>ID</h2>
    <form action="/new.php">
      <input type="text" placeholder="Student ID" name="sname" 
             oninvalid="alert('Fill it first!')" required /><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

เมื่อไหร่ oninvalid ถูกกระตุ้น

• ผู้ใช้กด Submit แต่ฟิลด์ที่มี required ว่างอยู่
• ค่าไม่ผ่าน pattern, min, max, type="email" ฯลฯ
• เรียก form.reportValidity() หรือ input.reportValidity() ด้วย JavaScript

ตัวอย่างขั้นสูง: Custom Validation Message

<form id="myForm">
  <input type="email" name="email" required 
         oninvalid="this.setCustomValidity('Please enter a valid email address')"
         oninput="this.setCustomValidity('')">
  <input type="password" name="pwd" required minlength="8"
         oninvalid="this.setCustomValidity('Password must be at least 8 characters')"
         oninput="this.setCustomValidity('')">
  <input type="number" name="age" required min="18" max="100"
         oninvalid="setAgeMessage(this)"
         oninput="this.setCustomValidity('')">
  <button type="submit">Submit</button>
</form>

<script>
function setAgeMessage(input) {
  if (input.validity.valueMissing) {
    input.setCustomValidity('Age is required');
  } else if (input.validity.rangeUnderflow) {
    input.setCustomValidity(`Must be at least ${input.min}`);
  } else if (input.validity.rangeOverflow) {
    input.setCustomValidity(`Must be at most ${input.max}`);
  }
}
</script>

ValidityState Object (ตรวจสอบประเภทข้อผิดพลาด)

input.addEventListener('invalid', function(e) {
  const v = this.validity;
  if (v.valueMissing) console.log('Required field');
  if (v.typeMismatch) console.log('Wrong type (email, url, etc.)');
  if (v.patternMismatch) console.log('Pattern mismatch');
  if (v.tooLong) console.log('Too long');
  if (v.tooShort) console.log('Too short');
  if (v.rangeUnderflow) console.log('Below min');
  if (v.rangeOverflow) console.log('Above max');
  if (v.stepMismatch) console.log('Step mismatch');
  if (v.badInput) console.log('Bad input (non-numeric in number field)');
});

CSS สำหรับ Invalid State

input:invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220,53,69,0.15);
}

input:valid {
  border-color: #28a745;
}

/* เฉพาะเมื่อโฟกัสหรือส่งฟอร์มแล้ว */
input:not(:placeholder-shown):invalid {
  border-color: #dc3545;
}

form.was-validated input:invalid { /* Bootstrap style */
  border-color: #dc3545;
}

ปิด Validation Message เริ่มต้น

<form onsubmit="event.preventDefault(); validateForm()">
  <input required>
  <button type="submit">Submit</button>
</form>

<script>
function validateForm() {
  const form = document.querySelector('form');
  if (!form.checkValidity()) {
    // Custom UI แทน browser default
    showCustomErrors();
  } else {
    form.submit();
  }
}
</script>