Obsługa błędów formularza z poziomu Javascript

Często Webmaster umieszcza na swojej stronie formularz, pojedyncze 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 w ogó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łuż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">
function sprawdz(){
if(document.formularz.pole1.value==""){
alert("Wypełnij pole");
return false;
}
return true;
}
</script>


2. Pole e-mail - skrypt sprawdza, czy pole zawiera symbol "@".

<input type="text" name="pole2">



<script language="javascript">
function emile(){
var adres=document.formularz.pole2.value
var malpa=adres.indexOf('@');
kropka=adres.lastIndexOf('.');
if (malpa<2 || malpa>kropka){
alert("Adres e-mail wpisany niepoprawnie");
return false;
}
return true;
}
</script>

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">
function liczba(){
var numer=document.formularz.pole3.value;
if (isNaN(numer)){
alert("Wpisz liczbę");
return false;
}
return true;
}
</script>

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">
function lista(){
if(document.formularz.pole5.selectedIndex<0){
alert("Nie wybrałeś żadnego pola");
return false;
}
return true;
}
</script>

6. Checkbox- funkcja sprawdza, czy zostało zaznaczone pole Checkbox.

<input type="checkbox" value="" name="pole6">


<script language="javascript">
function checkbox(){
if(document.formularz.pole6.checked==false){
alert("Nie zaznaczyłeś pola");
return false;
}
return true;
}
</script>

Gotowy skrypt możemy podpiąć do przycisku "Wyślij" np. dla funkcji sprawdz():
<input type=button value=wyślij onClick="sprawdz()">

---

Paweł Pietrasz