Formularze i Walidacja

Witaj z powrotem.

W poprzedniej lekcji poznałeś zdarzenia.

Zdarzenia pomagają JavaScript reagować na kliknięcia, pisanie, formularze i inne działania użytkownika.

Bardzo przydatne.

Bardzo interaktywne.

Bardzo w stylu: “w końcu przycisk coś robi.”

Dzisiaj kontynuujemy jedną z najważniejszych części web developmentu.

Formularze.

Formularze są wszędzie.

Formularze kontaktowe.

Formularze logowania.

Pola wyszukiwania.

Zapisy do newslettera.

Strony checkout.

Małe pudełka, w których użytkownicy wpisują swoje przeznaczenie.

Ale użytkownicy są kreatywni.

Bardzo kreatywni.

Jeśli poprosisz o email, ktoś wpisze:

banana

Jeśli poprosisz o imię, ktoś nie wpisze nic.

Jeśli poprosisz o hasło, ktoś wpisze:

A potem będzie zdziwiony, że strona mówi “nie”.

Dlatego potrzebujemy walidacji.

Walidacja oznacza sprawdzanie danych użytkownika, zanim je zaakceptujemy.

JavaScript pomaga nam prowadzić użytkownika, zanim wyślemy dane gdziekolwiek.

Jak uprzejmy ochroniarz.

Ale ze średnikami.

Czego Się Nauczysz

W tej lekcji nauczysz się:

jak działają formularze w HTML;
jak wybierać inputy;
jak odczytywać wartości inputów;
jak sprawdzać puste pola;
jak sprawdzać email;
jak sprawdzać długość hasła;
jak pokazywać komunikaty błędu;
jak pokazywać komunikaty sukcesu;
jak używać funkcji pomocniczych;
jak zbudować formularz rejestracji.

Na końcu tej lekcji będziesz potrafić tworzyć formularze, które sprawdzają dane użytkownika przed wysłaniem.

To duży krok.

Bo formularze bez walidacji są jak drzwi bez klamki.

Technicznie istnieją.

Emocjonalnie mylą.

Czym Jest Walidacja Formularza?

Walidacja formularza oznacza sprawdzanie, czy dane wpisane przez użytkownika są akceptowalne.

Przykład:

Imię nie może być puste.
Email musi wyglądać jak email.
Hasło musi być wystarczająco długie.
Wiadomość musi zawierać tekst.

Walidacja może odbywać się w dwóch miejscach:

w przeglądarce za pomocą JavaScript;
na serwerze za pomocą kodu backendowego.

W tej lekcji skupiamy się na walidacji frontendowej z JavaScript.

Ważne:

Walidacja frontendowa poprawia doświadczenie użytkownika.

Ale nie wystarcza do bezpieczeństwa.

Prawdziwe aplikacje muszą walidować dane również na backendzie.

Nigdy nie ufaj tylko przeglądarce.

Przeglądarka żyje na komputerze użytkownika.

A użytkownicy mają przyciski.

Niebezpieczne przyciski.

Utwórz Projekt

Utwórz folder dla tej lekcji:

mkdir javascript-lesson9
cd javascript-lesson9
touch index.html
touch script.js

Twój projekt powinien wyglądać tak:

javascript-lesson9/
  index.html
  script.js

Otwórz folder w edytorze.

Dzisiaj zbudujemy formularz, zwalidujemy go i pokażemy komunikaty.

Mały projekt.

Duża lekcja.

Formularz jest gotowy.

Chaos czeka.

Napisz HTML

Otwórz index.html i dodaj:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formularze i Walidacja</title>
</head>
<body>
  <h1>Formularze i Walidacja</h1>

  <form id="signupForm">
    <label for="nameInput">Imię</label>
    <input id="nameInput" type="text" placeholder="Twoje imię">

    <label for="emailInput">Email</label>
    <input id="emailInput" type="email" placeholder="ty@example.com">

    <label for="passwordInput">Hasło</label>
    <input id="passwordInput" type="password" placeholder="Minimum 6 znaków">

    <button type="submit">Zarejestruj się</button>
  </form>

  <p id="message">Wypełnij formularz i wyślij go.</p>

  <script src="script.js"></script>
</body>
</html>

To daje nam:

formularz;
input na imię;
input na email;
input na hasło;
przycisk submit;
miejsce na komunikat.

Prosto.

Czysto.

Gotowe, żeby uprzejmie oceniać dane użytkownika.

Wybierz Formularz i Inputy

Otwórz script.js i dodaj:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

Teraz JavaScript ma dostęp do formularza i inputów.

Te zmienne reprezentują elementy HTML.

Ale pamiętaj:

Element input to nie to samo co wartość wpisana w środku.

To:

nameInput

to element input.

To:

nameInput.value

to tekst wpisany przez użytkownika.

Pudełko.

Zawartość.

Różne rzeczy.

Jak pudełko po pizzy i pizza.

Nie jedz pudełka.

Obsługa Submit Formularza

Teraz dodajemy event listener dla submit.

function handleSignup(event) {
  event.preventDefault();

  console.log("Formularz wysłany!");
}

signupForm.addEventListener("submit", handleSignup);

Odśwież przeglądarkę.

Wyślij formularz.

Strona nie powinna się przeładować.

W konsoli powinno pojawić się:

Formularz wysłany!

Dlaczego strona się nie przeładowuje?

Bo użyliśmy:

event.preventDefault();

Domyślnie formularze przeładowują stronę po wysłaniu.

Ale my chcemy, żeby JavaScript obsłużył formularz.

Dlatego zatrzymujemy domyślne zachowanie.

Bez preventDefault strona się przeładowuje, komunikat znika, a twoja pewność siebie idzie na spacer.

Odczytywanie Wartości Inputów

Teraz odczytajmy wartości.

Zaktualizuj handleSignup:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
  const email = emailInput.value;
  const password = passwordInput.value;

  console.log(name);
  console.log(email);
  console.log(password);
}

Wpisz coś do formularza i wyślij.

Powinieneś zobaczyć wartości w konsoli.

To podstawowy schemat:

const value = input.value;

Bardzo częsty.

Bardzo ważny.

Bardzo łatwy do zapomnienia, kiedy mózg debuguje pięć rzeczy naraz.

Walidacja Pustych Pól

Pierwsza zasada walidacji jest prosta.

Pola nie mogą być puste.

Zaktualizuj handleSignup:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
  const email = emailInput.value;
  const password = passwordInput.value;

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Wypełnij wszystkie pola.";
    return;
  }

  messageElement.textContent = "Formularz wygląda dobrze!";
}

Teraz wyślij pusty formularz.

Powinieneś zobaczyć:

Wypełnij wszystkie pola.

return jest ważne.

Zatrzymuje funkcję.

Jeśli formularz jest niepoprawny, pokazujemy błąd i kończymy.

Nie trzeba iść dalej.

Jak zobaczyć dym w kuchni i zdecydować, że to nie jest dobry moment na pieczenie ciasta.

Mądrze.

Usuwanie Pustych Spacji za Pomocą trim

Jest jeden problem.

Użytkownik może wpisać same spacje:

Technicznie to nie jest pusty string.

Ale to też nie jest prawdziwe imię.

Dlatego używamy .trim().

Przykład:

const name = nameInput.value.trim();

.trim() usuwa spacje z początku i końca stringa.

Zaktualizuj kod:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Wypełnij wszystkie pola.";
    return;
  }

  messageElement.textContent = "Formularz wygląda dobrze!";
}

Teraz same spacje nie przejdą walidacji.

Dobrze.

Użytkownicy są kreatywni.

Ale my się uczymy.

Walidacja Emaila

Proste sprawdzenie emaila może używać .includes().

Przykład:

if (!email.includes("@")) {
  messageElement.textContent = "Wpisz poprawny email.";
  return;
}

To nie jest perfekcyjna walidacja emaila.

Walidacja emaili potrafi być zaskakująco skomplikowana.

Bardzo skomplikowana.

Jak otwieranie szuflady i znajdowanie w środku kolejnej szuflady.

Dla początkujących sprawdzenie @ wystarczy, żeby zrozumieć ideę.

Zaktualizuj funkcję:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Wypełnij wszystkie pola.";
    return;
  }

  if (!email.includes("@")) {
    messageElement.textContent = "Wpisz poprawny email.";
    return;
  }

  messageElement.textContent = "Formularz wygląda dobrze!";
}

Teraz jeśli użytkownik wpisze:

banana

JavaScript mówi nie.

Uprzejmie.

Ale stanowczo.

Walidacja Długości Hasła

Teraz sprawdźmy długość hasła.

Przykład:

if (password.length < 6) {
  messageElement.textContent = "Hasło musi mieć minimum 6 znaków.";
  return;
}

Dodajmy to do funkcji:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    messageElement.textContent = "Wypełnij wszystkie pola.";
    return;
  }

  if (!email.includes("@")) {
    messageElement.textContent = "Wpisz poprawny email.";
    return;
  }

  if (password.length < 6) {
    messageElement.textContent = "Hasło musi mieć minimum 6 znaków.";
    return;
  }

  messageElement.textContent = "Formularz wygląda dobrze!";
}

Teraz formularz sprawdza:

puste pola;
format emaila;
długość hasła.

To już jest użyteczne.

Nie idealne.

Ale użyteczne.

Jak krzesło z czterema nogami.

Dobry początek.

Dodaj Lepsze Style

Teraz sprawmy, żeby formularz wyglądał lepiej.

Zaktualizuj index.html:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formularze i Walidacja</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    .card {
      background-color: white;
      padding: 24px;
      border: 2px solid #e5e7eb;
      border-radius: 18px;
    }

    h1 {
      font-size: 42px;
    }

    label {
      display: block;
      margin-top: 16px;
      font-weight: 700;
    }

    input {
      width: 100%;
      margin-top: 8px;
      padding: 12px;
      border: 2px solid #d1d5db;
      border-radius: 12px;
      font-size: 18px;
      box-sizing: border-box;
    }

    button {
      margin-top: 18px;
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    .message {
      margin-top: 20px;
      padding: 16px;
      border-radius: 14px;
      background-color: #eff6ff;
      border: 2px solid #bfdbfe;
    }

    .error {
      background-color: #fef2f2;
      border-color: #fecaca;
      color: #991b1b;
    }

    .success {
      background-color: #ecfdf5;
      border-color: #bbf7d0;
      color: #166534;
    }
  </style>
</head>
<body>
  <h1>Formularze i Walidacja</h1>

  <div class="card">
    <form id="signupForm">
      <label for="nameInput">Imię</label>
      <input id="nameInput" type="text" placeholder="Twoje imię">

      <label for="emailInput">Email</label>
      <input id="emailInput" type="email" placeholder="ty@example.com">

      <label for="passwordInput">Hasło</label>
      <input id="passwordInput" type="password" placeholder="Minimum 6 znaków">

      <button type="submit">Zarejestruj się</button>
    </form>

    <p id="message" class="message">Wypełnij formularz i wyślij go.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Teraz formularz wygląda, jakby należał do strony internetowej.

Nie do dokumentu z 1998 roku.

Postęp.

Utwórz Funkcje Pomocnicze

Nasza walidacja działa.

Ale często powtarzamy tę linię:

messageElement.textContent = "...";

Utwórzmy funkcję pomocniczą.

Zaktualizuj script.js:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    showMessage("Wypełnij wszystkie pola.", "error");
    return;
  }

  if (!email.includes("@")) {
    showMessage("Wpisz poprawny email.", "error");
    return;
  }

  if (password.length < 6) {
    showMessage("Hasło musi mieć minimum 6 znaków.", "error");
    return;
  }

  showMessage(`Witaj, ${name}! Dane konta wyglądają poprawnie.`, "success");
}

signupForm.addEventListener("submit", handleSignup);

Dużo czyściej.

Teraz to:

showMessage("Wypełnij wszystkie pola.", "error");

aktualizuje tekst i styl.

Funkcje pomocnicze pomagają unikać powtórzeń.

A powtórzenia w kodzie są jak skarpetki znikające w pralce.

Na początku to śmieszne.

Potem staje się problemem życiowym.

Wyczyść Inputy Po Sukcesie

Jeśli formularz jest poprawny, możemy wyczyścić inputy.

Dodaj to po komunikacie sukcesu:

nameInput.value = "";
emailInput.value = "";
passwordInput.value = "";

Pełna końcówka:

showMessage(`Witaj, ${name}! Dane konta wyglądają poprawnie.`, "success");

nameInput.value = "";
emailInput.value = "";
passwordInput.value = "";

Teraz po poprawnym wysłaniu formularz znowu staje się pusty.

To częsty schemat.

Wyślij.

Pokaż komunikat.

Wyczyść pola.

Cywilizowane zachowanie.

Bardzo rzadkie w źle zbudowanych formularzach.

Pełny Kod JavaScript

Oto pełny script.js:

const signupForm = document.getElementById("signupForm");
const nameInput = document.getElementById("nameInput");
const emailInput = document.getElementById("emailInput");
const passwordInput = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");

function showMessage(text, type) {
  messageElement.textContent = text;
  messageElement.className = `message ${type}`;
}

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value.trim();
  const email = emailInput.value.trim();
  const password = passwordInput.value.trim();

  if (name === "" || email === "" || password === "") {
    showMessage("Wypełnij wszystkie pola.", "error");
    return;
  }

  if (!email.includes("@")) {
    showMessage("Wpisz poprawny email.", "error");
    return;
  }

  if (password.length < 6) {
    showMessage("Hasło musi mieć minimum 6 znaków.", "error");
    return;
  }

  showMessage(`Witaj, ${name}! Dane konta wyglądają poprawnie.`, "success");

  nameInput.value = "";
  emailInput.value = "";
  passwordInput.value = "";
}

signupForm.addEventListener("submit", handleSignup);

To jest już prawdziwy interaktywny formularz.

Odczytuje inputy.

Sprawdza dane.

Pokazuje komunikaty.

Czyści pola.

Jeszcze bez backendu.

Jeszcze bez bazy danych.

Jeszcze bez smoków serwerowych.

Ale to prawdziwe zachowanie frontendu.

Typowe Błędy

Zapomnienie preventDefault

Źle:

function handleSignup(event) {
  const name = nameInput.value;
}

Poprawnie:

function handleSignup(event) {
  event.preventDefault();

  const name = nameInput.value;
}

Bez preventDefault strona może się przeładować.

Wtedy komunikat JavaScript znika.

Potem oskarżasz komputer.

Potem przypominasz sobie brakującą linię.

Zapomnienie .value

Źle:

const email = emailInput;

Poprawnie:

const email = emailInput.value;

Element input to pudełko.

Wartość to to, co użytkownik wpisał.

Nie waliduj pudełka.

Waliduj zawartość.

Znowu zasada pizzy.

Zapomnienie return

Źle:

if (password.length < 6) {
  showMessage("Hasło jest za krótkie.", "error");
}

showMessage("Sukces!", "success");

To pokazuje błąd, a potem sukces.

Mylące.

Poprawnie:

if (password.length < 6) {
  showMessage("Hasło jest za krótkie.", "error");
  return;
}

showMessage("Sukces!", "success");

return zatrzymuje funkcję.

Bardzo przydatne.

Bardzo niedoceniane.

Jak sen.

Zbyt Proste Sprawdzanie Emaila

To jest proste:

email.includes("@")

Dobre do nauki.

Ale prawdziwa walidacja emaila jest bardziej skomplikowana.

Na razie celem jest zrozumienie logiki walidacji.

Nie zostanie międzynarodowym ministrem formatów emaili.

Praktyka

Stwórz formularz kontaktowy z:

imieniem;
emailem;
wiadomością.

Zasady:

imię nie może być puste;
email musi zawierać @;
wiadomość musi mieć minimum 10 znaków.

Pokaż komunikaty błędu, gdy coś jest nie tak.

Pokaż komunikat sukcesu, gdy wszystko jest poprawne.

Przykładowy komunikat sukcesu:

Dziękujemy! Twoja wiadomość jest gotowa do wysłania.

Pamiętaj:

To nie wysyła naprawdę wiadomości.

To tylko waliduje formularz.

Nadal użyteczne.

Nadal ważne.

Nadal frontend.

Mini Wyzwanie

Stwórz formularz potwierdzania hasła.

Formularz powinien mieć:

input password;
input confirm password;
przycisk submit;
miejsce na komunikat.

Zasady:

hasło nie może być puste;
hasło musi mieć minimum 6 znaków;
potwierdzenie hasła musi być takie samo jak hasło.

Jeśli wszystko jest poprawne, pokaż:

Hasło potwierdzone.

Jeśli nie, pokaż pomocny błąd.

To bardzo częste na prawdziwych stronach.

Użytkownicy często wpisują hasło dwa razy.

Bo najwyraźniej jedno pole hasła to za mało presji emocjonalnej.

Podsumowanie

Dzisiaj nauczyłeś się:

formularze zbierają dane od użytkownika;
JavaScript może odczytywać wartości inputów przez .value;
wysłanie formularza można obsłużyć przez submit;
preventDefault zatrzymuje przeładowanie strony;
walidacja sprawdza, czy dane są akceptowalne;
.trim() usuwa dodatkowe spacje;
puste pola można sprawdzać przez === "";
email można sprawdzać prostymi warunkami;
długość hasła można sprawdzać przez .length;
funkcje pomocnicze zmniejszają powtórzenia;
komunikaty błędu i sukcesu poprawiają doświadczenie użytkownika.

To duży krok.

Formularze są wszędzie.

Walidacja jest wszędzie.

Użytkownicy wpisują dziwne rzeczy wszędzie.

JavaScript pomaga nam wprowadzać porządek.

Nie idealny porządek.

Ale wystarczający, żeby przeżyć.

Następna Lekcja

W następnej lekcji poznamy local storage.

Local storage pozwala JavaScript zapisywać dane w przeglądarce.

To znaczy, że strona może pamiętać rzeczy nawet po odświeżeniu.

Zadania.

Ustawienia.

Imiona.

Małe kawałki danych.

W końcu JavaScript dostaje małą pamięć.

Niebezpieczne.

Ale użyteczne.