Blokowanie wysyłki formularza w JavaScript
W razie potrzeby można zablokować wysyłkę
formularza. Robi się to za pomocą już znanej Ci metody
preventDefault.
Spójrzmy na przykład.
Załóżmy, że mamy następujący formularz:
<form action="/handler/" method="POST">
<input name="test1">
<input name="test2">
<input type="submit">
</form>
Pobierzmy do niego referencję do zmiennej:
let form = document.querySelector('form');
Wysyłkę formularza można przechwycić za pomocą zdarzenia
submit:
form.addEventListener('submit', function() {
});
Zablokujmy teraz wysyłkę formularza:
form.addEventListener('submit', function(event) {
event.preventDefault();
});
Dany jest formularz z inputem. Przy próbie wysłania sprawdź, czy do inputa wprowadzono poprawny adres email. Jeśli nie - zablokuj wysyłkę formularza i wyświetl komunikat o tym.