Formulierverzending blokkeren in JavaScript

Indien nodig kan het verzenden van een formulier worden geblokkeerd. Dit wordt gedaan via de reeds bekende preventDefault. Laten we een voorbeeld bekijken.

Stel we hebben het volgende formulier:

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

Laten we een referentie eraan in een variabele krijgen:

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

Het verzenden van het formulier kan worden opgevangen via de gebeurtenis submit:

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

Laten we nu het verzenden van het formulier blokkeren:

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

Gegeven een formulier met een invoerveld. Controleer bij een verzendpoging of er een geldig e-mailadres in het invoerveld is ingevoerd. Als dit niet het geval is - blokkeer dan het verzenden van het formulier en geef een bericht hierover weer.