Rozdział 4 · Zadanie 4

Walidacja przed wysłaniem

Nie pozwalamy wysłać pustego formularza — to samo if/else z Rozdziału 3.

Zadanie

Dodaj walidację JavaScript, która nie pozwoli wysłać formularza, jeśli imię nie jest wypełnione:

about-me.html

<form action="https://api.web3forms.com/submit" method="POST" onsubmit="return checkForm()">
  ...
</form>

<script>
  function checkForm() {
    let name = document.getElementsByName("name")[0].value;
    if (name === "") {
      alert("Proszę wpisać imię przed wysłaniem!");
      return false;
    }
    return true;
  }
</script>

Jak to czytać

onsubmit="return checkForm()" — «przed wysłaniem formularza uruchom tę funkcję».

return false; — «zatrzymaj wysyłanie» (formularz nigdzie nie poleci). return true; — «wszystko OK, wysyłaj».

To ten sam if/else, który znasz już z Rozdziału 3, lekcja 6 — tylko teraz kontroluje nie tekst na stronie, a samo wysłanie formularza.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska