การห้ามการส่งแบบฟอร์มใน JavaScript

หากจำเป็น คุณสามารถห้ามการส่งแบบฟอร์มได้ ทำได้ผ่านทาง preventDefault ที่คุณรู้จักอยู่แล้ว มาดูตัวอย่างกัน

สมมติว่าเรามีแบบฟอร์มต่อไปนี้:

<form action="/handler/" method="POST">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

รับลิงก์ไปยังแบบฟอร์มในตัวแปร:

let form = document.querySelector('form');

สามารถตรวจจับการส่งแบบฟอร์มได้ผ่านเหตุการณ์ submit:

form.addEventListener('submit', function() {
	
});

ตอนนี้เรามาห้ามการส่งแบบฟอร์มกัน:

form.addEventListener('submit', function(event) {
	event.preventDefault();
});

กำหนดแบบฟอร์มที่มีอินพุต เมื่อพยายามส่ง ให้ตรวจสอบว่าอีเมลที่ป้อนในอินพุตถูกต้องหรือไม่ หากไม่ถูกต้อง - ให้ห้ามการส่งแบบฟอร์ม และแสดงข้อความเกี่ยวกับเรื่องนั้น