HTML Constraint Validation API — validate form โดยไม่ต้อง JS

Browser มี Constraint Validation API ในตัว ใช้ validate form input โดยไม่ต้องเขียน logic เอง

<!-- HTML validation attributes -->
<input type="email" required />
<input type="text" minlength="3" maxlength="50" pattern="[A-Za-z]+" />
<input type="number" min="1" max="100" step="5" />
<input type="url" />

Custom validation message ด้วย JS:

const input = document.querySelector('#username');

input.addEventListener('input', () => {
  if (input.value.includes(' ')) {
    input.setCustomValidity('ชื่อผู้ใช้ต้องไม่มีช่องว่าง');
  } else {
    input.setCustomValidity('');  // '' = valid
  }
});

Validate programmatically:

const form = document.querySelector('form');
const input = form.querySelector('#email');

input.validity.typeMismatch;  // true ถ้า email format ผิด
input.validity.valueMissing;  // true ถ้า required แต่ว่าง
input.validity.tooShort;      // true ถ้าน้อยกว่า minlength
input.validity.valid;         // true ถ้าทุก constraint ผ่าน

form.checkValidity();         // false ถ้ามี input ที่ invalid
form.reportValidity();        // แสดง UI error และ focus input แรกที่ invalid

Styling ด้วย CSS pseudo-class:

input:valid   { border-color: #16a34a; }
input:invalid { border-color: #dc2626; }
/* :user-invalid — แสดง error เฉพาะหลัง user interact แล้ว (ดีกว่า :invalid) */
input:user-invalid { border-color: #dc2626; }

ใช้ novalidate บน <form> ถ้าต้องการ control validation ทั้งหมดผ่าน JS เอง