Często webmaster umieszcza na swojej stronie formularz, pojedyńcze pole lub listę rozwijaną, pod którymi podpięty jest najczęściej skrypt PHP, CGI lub inny. Zadanie tych skryptów jest zazwyczaj oczywiste. Mają pobrać i przetworzyć informacje zawarte
w polach formularza. Problem zazwyczaj występuje, kiedy dane wpisane są niepoprawnie lub wogóle ich nie ma. Najczęstszym rozwiązaniem w takiej sytuacji jest sprawdzanie poprawności formularza po stronie serwera. Taki skrypt zanim przetworzy informacje, sprawdza czy ma ich komplet. Jeżeli program stwierdzi, że czegoś mu brakuje, to wysyła komunikat do przeglądarki i kończy swoją “pracę”. Z punktu widzenia Webmastera wszystko wygląda ok. Ale czy zawsze?
Załóżmy, że odwiedzający ma do wypełnienia skomplikowany formularz. Taka osoba wypełnia go i wysyła dane na serwer, przy czym czeka 1-2 min. Po przesłaniu danych okazuje się, że jest błąd i wszystko trzeba zaczynać od nowa. Przy czym okazuje się, że straciliśmy już od 5 do 10 min. Zaczynamy wszystko jeszcze raz, uzupełniamy formularz i wysyłamy. Wszystko jest ok, jesteśmy zadowoleni. Ale w sumie straciliśmy ok. 15 min, co przeliczając na taryfę TP… Widząc ten problem może warto cofnąć się o krok i przypomnieć sobie jak cennym narzędziem może okazać się uniwersalny język obsługiwany po stronie klienta np. JavaScript.
Koncentrując się na powyższym problemie postanowiłem przedstawić kilka użytecznych funkcji, które sprawdzają poprawność charakterystycznych dla siebie elementów. I tak jeśli wszystkie pola będą zwracać TRUE, wtedy program PHP lub inny będzie przyjmował dane, a jeśli wartość będzie FALSE, JavaScript poinformuje nas o tym. Załóżmy, że wszystkie elementy będą umieszczone w polu <form name=formularz>
1. Pole tekstowe – skrypt sprawdza, czy pole nie pozostało puste.
| <input type=”text” name=”pole1″>
<script language=”javascript”> |
2. Pole e-maile – skrypt sprawdza, czy pole zawiera symbol “@”.
| <input type=”text” name=”pole2″>
<script language=”javascript”> |
3. Pole liczbowe – ta funkcja sprawdzi, czy w tym polu znajdziemy liczbę. Pamiętać należy, że w JavaScript części ułamkowe zapisujemy po kropce a nie po przecinku.
| <input type=”text” name=”pole3″>
<script language=”javascript”> |
4. Obszar tekstowy – taka sama funkcja jak do pola tekstowego, z jedyną modyfikacją. W skrypcie zamiast pole1 należy wpisać bieżącą nazwę.
5. Lista – kolejna funkcja sprawdzająca, czy zostało zaznaczone pole w liście.
| <select name=”pole5″> <option>opcja1 <option>opcja2 </select> <script language=”javascript”> |
6. Checkbox – funkcja sprawdza, czy zostało zaznaczone pole Checkbox.checked
| <input type=”checkbox” value=”” name=”pole6″>
<script language=”javascript”> |
Gotowy skrypt możemy podpiąć do przycisku “Wyślij” np. dla funkcji sprawdz():
| <input type=button value=wyślij onClick=”sprawdz()”> |
