ใช้แอตทริบิวต์ novalidate ในแท็ก <form> เพื่อระบุว่าฟอร์มไม่ควรตรวจสอบความถูกต้อง (Validation) เมื่อส่งฟอร์ม แม้จะมีแอตทริบิวต์ required, pattern, type="email" ฯลฯ
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อใช้งานแอตทริบิวต์ novalidate:
<!DOCTYPE html>
<html>
<head>
<title>HTML novalidate attribute</title>
</head>
<body>
<form action="" method="get" novalidate>
Student Name<br><input type="text" name="sname" required><br>
Rank<br><input type="number" name="rank" required><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
กรณีที่ควรใช้ novalidate
- Save Draft: บันทึกร่างก่อนกรอกครบ
- Multi-step Form: ขั้นตอนกลาง ไม่ต้อง validate ทุกฟิลด์
- Custom Validation: จัดการ Validation เองด้วย JavaScript
- Testing: ทดสอบ Server-side validation
ตัวอย่าง: ปุ่ม Save Draft vs Submit
<form id="myForm" action="/submit" method="post">
<input type="text" name="title" required placeholder="Title">
<textarea name="content" required placeholder="Content"></textarea>
<button type="submit" name="action" value="draft" formnovalidate>
Save Draft
</button>
<button type="submit" name="action" value="publish">
Publish
</button>
</form>
แอตทริบิวต์ formnovalidate ในปุ่ม Submit - ข้าม validation เฉพาะปุ่มนั้น (HTML5)
การปิด Validation เฉพาะฟิลด์
<input type="email" name="email" required> <!-- validate -->
<input type="text" name="nickname"> <-- ไม่ required -->
<input type="text" name="code" required formnovalidate> <-- ข้าม validation -->
JavaScript: ตรวจสอบและควบคุม Validation
const form = document.getElementById('myForm');
// ตรวจสอบความถูกต้องด้วยตนเอง
if (!form.checkValidity()) {
form.reportValidity(); // แสดง UI validation
return;
}
// ปิด validation ชั่วคราว
form.noValidate = true;
form.submit();
form.noValidate = false;
หมายเหตุ: novalidate ปิด Client-side validation** เท่านั้น Server-side validation ยังคงจำเป็นต้องมีเสมอ เพื่อความปลอดภัย
