Ngăn chặn gửi biểu mẫu trong JavaScript

Khi cần thiết, bạn có thể ngăn chặn việc gửi biểu mẫu. Điều này được thực hiện thông qua phương thức preventDefault mà bạn đã biết. Hãy cùng xem xét một ví dụ.

Giả sử chúng ta có biểu mẫu sau:

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

Lấy tham chiếu đến nó vào một biến:

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

Việc gửi biểu mẫu có thể được bắt thông qua sự kiện submit:

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

Bây giờ hãy ngăn chặn việc gửi biểu mẫu:

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

Cho một biểu mẫu có một ô nhập liệu. Khi cố gắng gửi biểu mẫu, hãy kiểm tra xem ô nhập liệu có chứa một email hợp lệ hay không. Nếu không - hãy ngăn chặn việc gửi biểu mẫu và hiển thị thông báo về điều đó.