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

Autor: Paweł Piertasz, dodano: 26-07-2003
Kategoria: Programowanie i tworzenie

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">
function sprawdz(){
if(document.formularz.pole1.value==""){
alert("Wypełnij pole");
return false;
}
return true;
}
</script>



2. Pole e-maile - 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-mile 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.checked

<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()">

Ocena 2.55/5 (51.08%) (166 głosów)

Komentarze:



    Dodaj komentarz:


    Temat:
    Twój nick:
    Komentarz:
     

    Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.

     


    Najlepiej oceniane artykuły

    Najnowsze wiadomości