Walidacja danych z formularza przed ich przesłaniem

Założenie: Przed wysłaniem formularza na serwer, sprawdzimy poprawność danych wprowadzonych przez użytkownika za pomocą JavaScript, aby uniknąć błędów po stronie serwera.

Krok po kroku:

1. Dodanie prostej walidacji w JavaScript: Załóżmy, że mamy formularz z polem “imię”. Dodamy prosty skrypt JavaScript, który sprawdzi, czy pole to nie jest puste.

function validateForm() {
  let x = document.forms["myForm"]["name"].value;
  if (x == "") {
    alert("Imię musi być wypełnione!");
    return false;
  }
}
				

Ten kod JavaScript sprawdza wartość pola “name” w formularzu o nazwie “myForm”. Jeśli jest puste, wyświetla alert i zapobiega wysłaniu formularza.

2. Integracja z formularzem HTML: Umieszczamy nasz skrypt w sekcji `` lub na końcu sekcji `` naszego dokumentu HTML, a do formularza dodajemy atrybut `onsubmit`.

<form name="myForm" onsubmit="return validateForm()" action="process.php" method="post">
  Imię: <input type="text" name="name"><br>
  <input type="submit" value="Wyślij">
</form>
				

Atrybut `onsubmit=”return validateForm()”` wywołuje funkcję `validateForm()` przed wysłaniem formularza. Funkcja `return false;` zapobiega wysłaniu formularza, jeśli walidacja nie powiedzie się.

3. Obsługa po stronie serwera (PHP): Chociaż walidacja po stronie klienta jest ważna, zawsze należy przeprowadzić walidację po stronie serwera (w PHP) jako dodatkową warstwę bezpieczeństwa.

Ten kod PHP sprawdza, czy zmienna `$name` jest pusta. Jeśli tak, wyświetla komunikat o błędzie. W przeciwnym wypadku wyświetla powitanie.

Ten przykład pokazuje podstawy walidacji danych z formularza. Pamiętaj, że bardziej zaawansowane formularze wymagają bardziej złożonych metod walidacji. Zachęcamy do dalszego zgłębiania tematu!