Event oninvalid ทริกเกอร์เมื่อ Form Field ไม่ผ่าน Validation (HTML5 Constraint Validation) เช่น Required Field ว่าง, Pattern ไม่ตรง, Type ไม่ตรง — ก่อน Submit
ตัวอย่างโค้ด
<!DOCTYPE html>
<html>
<body>
<script>
function resetFunct() {
alert("The form was reset");
}
</script>
<form>
Enter Name: <input type="text" required oninvalid="alert('Fill the form before submitting!');"><br>
Enter birth month: <input type="text"><br>
<input type="submit">
<input type="reset" onclick="resetFunct()">
</form>
</body>
</html>
คำอธิบาย
- ทำงานกับ Input ที่มี Constraint:
required,pattern,min/max,type="email/number/url" - ทริกเกอร์เมื่อ User กด Submit แต่ Field ไม่ Valid
- Browser จะแสดง Default Validation UI (Bubble) พร้อมกับ Event นี้
Custom Validation Message (แนะนำ)
<input type="email" required
oninvalid="this.setCustomValidity('Please enter a valid email')"
oninput="this.setCustomValidity('')">
// oninput: Clear Custom Message เมื่อ User พิมพ์ใหม่
Constraint Validation API (สมัยใหม่)
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
if (!form.checkValidity()) {
e.preventDefault();
// หา Field แรกที่ Invalid
const invalid = form.querySelector(':invalid');
invalid.focus();
invalid.reportValidity(); // แสดง Browser UI
}
});
Pseudo-classes ที่เกี่ยวข้อง
:valid— Field ผ่าน Validation:invalid— Field ไม่ผ่าน:required— Field ที่ Required:optional— Field ที่ไม่ Required:user-invalid(Firefox) /:user-error— Invalid หลัง User Interact แล้ว
