ความแตกต่างระหว่าง Novalidate และ Formnovalidate

บทนำ

ทั้งสองแอตทริบิวต์ใช้สำหรับข้ามการตรวจสอบความถูกต้อง (Validation) แต่ขอบเขตและการใช้งานต่างกัน

ตารางเปรียบเทียบ

คุณสมบัติ	novalidate	formnovalidate
วางที่	`<form>`	`<input type="submit">` / `<button type="submit">`
ขอบเขต	ทั้งฟอร์ม (ทุกปุ่ม Submit)	เฉพาะปุ่มที่มีแอตทริบิวต์นี้
ประเภท	Boolean Attribute	Boolean Attribute
Override	-	Override `novalidate` ของฟอร์ม
Browser Support	ดีกว่า	ไม่รองรับ IE, Safari (เก่า)

Novalidate (ฟอร์ม)

ปิด Validation ทั้งฟอร์ม - เหมาะสำหรับ "บันทึกแบบร่าง" (Save Draft)

<form action="" method="get" novalidate>
  ทีม: <input type="text" name="tname" required><br>
  อันดับ: <input type="number" name="trank" required><br>
  <input type="submit" value="Submit">
</form>

Formnovalidate (ปุ่ม)

Override validation สำหรับปุ่มเฉพาะ - เหมาะสำหรับ "บันทึกแบบร่าง" ในฟอร์มที่มี Validation

<form action="" method="get">
  อันดับ: <input type="number" name="rank" required><br>
  <input type="submit" value="Submit (Validate)"><br>
  <input type="submit" formnovalidate="formnovalidate" value="Submit (No Validation)">
</form>

สรุปการเลือกใช้

ต้องการปิด Validation ทั้งฟอร์ม → novalidate ที่ <form>
ต้องการปุ่มบางปุ่ม Validate บางปุ่มไม่ → formnovalidate ที่ปุ่มที่ไม่ต้อง Validate
ฟอร์มหลายขั้นตอน (Wizard) → ใช้ formnovalidate สำหรับปุ่ม "Previous" และ "Save Draft"