Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Walidacja formularzy

Email Drukuj PDF

Język JavaScript jest często używany do wstępnego sprawdzenia poprawności danych wprowadzanych przez użytkowników do formularza. Można to zrobić na dwa sposoby. Pierwszy to przypisanie zdarzeniu onsubmit własnej procedury obsługi, drugi to zastąpienie przycisku submit własnym. Spójrzmy na listing 5.11.

Listing 5.11. Walidacja formularza bez przycisku typu submit

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="pl">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta http-equiv="Content-Script-Type" content="text/javascript">

    <title>Moja strona WWW</title>

    <script type="text/javascript">

    function przetwarzaj_dane ()

    {

      var brakuje_danych=false;

      var formularz=document.forms[0];

      var napis="";

      if (formularz.imie.value == ""){

        napis += "imię\n"

        brakuje_danych=true;

      }

      if (formularz.nazwisko.value == ""){

        napis += "nazwisko\n"

        brakuje_danych=true;

      }

      if (formularz.kraj.value == ""){

        napis += "kraj\n"

        brakuje_danych=true;

      }

      if (formularz.tel.value == ""){

        napis += "telefon\n"

        brakuje_danych=true;

      }

      if (!brakuje_danych)

        formularz.submit();

      else

        alert ("Nie wypełniłeś następujących pól:\n" + napis);

    }

    </script>

  </head>

  <body>

    <form name="formularz1"

          action="index.php"

          method="get">

    <div>

    Proszę podać swoje dane:

    <br />

    <i>(Pola oznaczone * muszą zostać wypełnione)</i>

    <br /><br />

    </div>

    <table>

    <tr>

      <td><b>Dane personalne:</b></td>

      <td></td>

    </tr>

    <tr>

    <td>imię:</td>

    <td><input type="text" name="imie">*</td>

    </tr>

    <tr>

      <td>nazwisko:</td>

      <td><input type="text" name="nazwisko">*</td>

    </tr>

    <tr>

      <td><B>Adres:</B></td>

      <td></td>

    </tr>

    <tr>

      <td>ulica:</td>

      <td><input type="text" name="ulica"></td>

    </tr>

    <tr>

      <td>nr domu:</td>

      <td><input type="text" name="nrdomu"></td>

    </tr>

    <tr>

      <td>kod:</td>

      <td><input type="text" name="kod"></td>

    </tr>

    <tr>

      <td>miasto:</td>

      <td><input type="text" name="miasto"></td>

    </tr>

    <tr>

      <td>kraj:</td>

      <td><input type="text" name="kraj">*</td>

    </tr>

    <tr>

      <td>tel.:</td>

      <td><input type="text" name="tel">*</td>

    </tr>

    <tr>

    <td></td>

    <td align="center">

      <input type="button" name="wyslij"

      value="   Wyślij!   " onClick="przetwarzaj_dane()">

    </td>

    </tr>

    </table>

    </form>

  </body>

</html>

To przykładowy formularz, w którym wypełnienie części pól jest wymagane, a niektóre z nich mogą pozostać puste. Jego wygląd po wczytaniu do przeglądarki obrazuje rysunek 5.2.

Rysunek 5.2. Formularz służący do wprowadzania danych

Jeżeli użytkownik wprowadzający dane nie wypełni któregokolwiek pola oznaczonego gwiazdką, po kliknięciu przycisku Wyślij zostanie wyświetlony komunikat informujący, które z nich zostały pominięte (rysunek 5.3).

Rysunek 5.3. Okno z informacją o braku danych

Jest to możliwe, gdyż wymieniony przycisk nie jest elementem typu submit, a typu button, któremu została przypisana procedura obsługi zdarzenia onclick w postaci funkcji przetwarzaj_dane. Zajmuje się ona sprawdzeniem kompletności danych. Odwołując się do właściwości value każdego z pól, może stwierdzić, czy zawiera ono jakieś dane, czy też pusty ciąg znaków. W tym celu są wykorzystywane instrukcje warunkowe o schematycznej postaci:

if (formularz.nazwa_pola.value == ""){

Jeśli w którymkolwiek przypadku zostanie stwierdzony brak danych, czyli dane pole będzie zawierało pusty ciąg znaków, zmienna brakuje_danych otrzyma wartość true, a do zmiennej napis zostanie dodana nazwa brakującego pola.

Ostatecznie, jeśli zmienna brakuje_danych ma wartość true, to za pomocą metody alert jest wyświetlane pokazane wyżej okno dialogowe; kiedy natomiast ma wartość false, jest wykonywana metoda submit wysyłająca dane z formularza. Okno pojawia się na ekranie dzięki wywołaniu metody alert, której w postaci argumentu jest przekazywana wartość zmiennej napis (ta zmienna zawiera listę pominiętych pól formularza).

Gdyby istniała potrzeba, aby w formularzu znalazł się jednak element submit, należałoby postąpić nieco inaczej. Komórka tabeli zawierająca ten element powinna mieć wtedy postać:

<td align="center">

  <input type="submit" name="wyslij"

  value="   Wyślij!   ">

</td>

Niezbędne było również obsłużenie zdarzenia onsubmit formularza. To zdarzenie powstaje, gdy kliknięty zostanie przycisk typu submit. Aby przechwycić zdarzenie onsubmit, należy zatem zmodyfikować również znacznik form. Będzie on wyglądał następująco:

<form name="formularz1"

      action="index.php"

      method="get"

      onsubmit="return przetwarzaj_dane();"

Przy takiej definicji funkcja przetwarzaj_dane musi zwrócić wartość true, jeśli formularz ma zostać wysłany (czyli kiedy dane są kompletne), oraz false w przeciwnym razie (czyli kiedy dane są niekompletne). Tak więc kolejna modyfikacja dotyczy końcowych instrukcji if tej funkcji, które powinny wyglądać następująco:

if (!brakuje_danych)

  return true;

else{

  alert ("Nie wypełniłeś następujących pól:\n" + napis);

  return false;

}

 

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15211388