Jak wykonać formularz z automatycznym sprawdzaniem zawartości

Kategoria: Javascript, HTML i CSS



Elektryk
14 sierpień 2009 - 12:58
W tym tutorialu krok po kroku przedstwię jak w Java script stworzyć formularz który będzie sprawdzał automtycznie poprawność wprowadzanych danych.

"Jeśli cel przyświeca, sposób musi się znaleźć."

Zacznijmy od ustalenia co chcemy osiągnąć. Ma to być formularz zawierający pola tekstowe nick, hasło, powtórzenie hasła, e-mail, pola wyboru płeć i datę urodzenia oraz pole do zaznaczenia zaakceptowania regulaminu. Po za tym ma być przycisk który będzie wysyłał formularz. Tym czym bedzie odróżniał się nasz formularz jest to, że w trakcie wpisywania danych przeglądarka bedzie na bieżąco sprawdzać ich poprawność. Jeśli będą dobre to pokaże znaczek poprawności. Jeśli informacja w polu bedzie miałą nieodpowiednią długość lub zły format to internauta zostanie pokarany czerwonym krzyżykiem. Ponadto po kliknięciu na przycisk formularz jeszcze raz zostanie sprawdzony i ewentualnie zostanie zatrzymane jego wysyłanie.

"Jeżeli cię przestrasza praca, wspomnij na nagrodę"

Zacznijmy od napisania szkieletu kodu formularza. Oto i on w wersji skróconej:

<form name="formularz" action="plik.html" method="POST"> Nick: <input type="text" name="nick" id="nick"> Hasło: <input type="text" name="haslo" id="haslo"> Powtórz hasło: <input type="text" name="haslo2" id="haslo2"> E-mail: <input type="text" name="email" id="email"> Płeć: <select name="plec" id="plec"> <option value="0" selected="selected">Wybierz płeć</option"> <option value="Kobieta">Kobieta</option"> <option value="Mężczyzna">Mężczyzna</option"> </select> Data urodzenia: <select name="dzien" id="dzien"> <option value="0" selected="selected">Dzień</option"> <option value="1">1</option"> <option value="31">31</option"> </select> <select name="miesiac" id="miesiac"> <option value="0" selected="selected">Miesiąc</option"> <option value="1">Styczeń</option"> <option value="2">Luty</option"> </select> <select name="rok" id="rok"> <option value="0" selected="selected">Rok</option"> <option value="2000">2000</option"> <option value="2001">2001</option"> </select> Regulamin <input id="regulamin" name="regulamin" id="regulamin" type="checkbox" value="1" class="checkbox"> <input type="submit" name="prycisk" value="Wyślij"> </form>

Teraz musimy dodać grafiki. Grafikami są tik, krzyżyk i jeden pusty obrazek. Oto i one:
 bad.png (1,84 KB)
Ilość pobrań: 1  good.png (1,33 KB)
Ilość pobrań: 1  blank.png (1,23 KB)
Ilość pobrań: 1

Grafiki będą mieć swoje unikalne id. Do każdego inputa trzeba dopisać taki obrazek. Można to zrobić od razu za polem lub gdziekolwiek. I tak to potem trzeba ładnie CSSem udekorować. U mnie wygląda to tak, że elementy IMG są wstawianie od razu za danym inputem i mają id wg. schematu <nameinputa>_img oraz ścieżkę na pusty obrazek:

Nick: <input type="text" name="nick" id="nick"><img src="null.png" id="nick_img"> Hasło: <input type="text" name="haslo" id="haslo"><img src="null.png" id="haslo_img"> Powtórz hasło: <input type="text" name="haslo2" id="haslo2"><img src="null.png" id="haslo2_img"> ...

Teraz musimy dodać do naszego formularza zdarzenia które będą wywoływać funkcje sprawdzające poprawność wprowadzanych informacji. Dla pól tekstowych sprawdzanie bedzie następowało po każdym wpisanym znaku. Dla pól wyboru z kolei tylko podczas zmiany. Użyjemy do tego odpowiednio zdarzeń onkeyup oraz onchange. Ponadto dla pól tekstowym dodatkowo dodamy onblur by pole było również sprawdzane podczas wklejania kodu z menu kontekstowego. Wszystkie zdarzenia będą wywoływac jedną i tą samą funkcje CheckForm() przekazując jako argument odniesienie do danego pola.

Dla pól tekstowych będzie to wyglądać tak:
<input type="text" name="haslo" id="haslo" onkeyup="CheckForm(this);" onblur="CheckForm(this);">

a dla pól wyboru i checkboxa podobnie:
<select name="plec" id="plec" onchange="CheckForm(this);"> <option value="0" selected="selected">Wybierz płeć</option"> <option value="Kobieta">Kobieta</option"> <option value="Mężczyzna">Mężczyzna</option"> </select>

Reszte pól z powstawianymi zdarzeniami można znaleść na końcu poradnika gdzie znajduje się pełny kod.

Teraz zabieramy się za kod Java Script i naszą funkcje. Kod nalezy wstawić pomiędzy znaczniki HEAD. Oto zalążek funkcji:

<script type="text/javascript"> function CheckForm(e){ var ok = 1; //tu dalszy kod } </script>

jak widac w funkcji odbieramy odniesienie i ustawiamy zmienną ok na 1. W miejscu komentarza musimy z kolei dać instrukcje switch.

switch(e.name){ case "nick": if( e.value.length < 3 || e.value.length > 15) ok = 0; break; case "plec": if( e.options[e.selectedIndex].value == 0) ok = 0; break; ... }

Tradycyjnie podałem tylko dwa przypadki. Cały kod na dole poradnika. Wyjaśnię jedynie, że intrukcja sprawdza poprawność pola i jeśli jest zła to przypisuje do zmiennej ok wartość 1. Po instrukcji switch sprawdzamy jaka jest wartość tej zmiennej i jeśli wynosi 1 (formularz jest dobry) odpowiednio zmienia ściężkę grafiki. W innym wypadku także jest wstawiany odpowiedni obrazek.

if(ok == 1) document.getElementById(e.name+"_img").src = "good.png"; else document.getElementById(e.name+"_img").src = "bad.png"; return ok;

Funkcja ponadto zwraca wartość ok co się nam jeszcze przyda.

Na koniec pozostaje nam dodać funkcje która będzie sprawdzać poprawność formularza przy wysyłaniu. Aby to zrobić musimy dodać do formularza zdarzenie które zostanie wywołane gdy użytkownik naciśnie przycisk wysyłania.

<form name="formularz" action="plik.html" method="POST" onsubmit="return CheckFormAll();">

Widać, że wywołaliśmy nową fukcję CheckFormAll(). Musimy zatem napisać jej definicje i umieścić pod funkcją CheckForm

function CheckFormAll(){ var okAll=1; okAll = CheckForm(document.formularz.nick); okAll = CheckForm(document.formularz.plec); ... if(okAll != 1) {alert("Popraw błędy w formularzu"); return false;} }

Jak widać, funkcja sprawdza wszystkie pola i zbiera zwracane wyniki. Jeśli tylko któryś będzie wynosił zero wysyłanie formularza zostanie przerwane a internauta zostanie pochwalony komunikatem. Jeśli jednak kod będzie dobry formularz zostanie pomyślnie wysłany. I to tyle. Formularz poszedł do serwera więc nie pozostaje nam nic do mówienia a jedynie zakończyć ten poradnik pełnym kodem:

<script type="text/javascript"> function CheckForm(e){ var ok = 1; switch(e.id){ case "nick": if( e.value.length < 3 || e.value.length > 15) ok = 0; break; case "haslo": if( e.value.length < 5 || e.value.length > 15) ok = 0; CheckForm(document.formularz.haslo2); break; case "haslo2": if( e.value != document.formularz.haslo.value) ok = 0; break; case "email": if(e.value.match(/^([A-Za-z0-9\-]*\w)+@+([A-Za-z0-9\-]*\w)+(\.[A-Za-z]*\w)+$/) == null) ok = 0; break; case "dzien": if( e.options[e.selectedIndex].value == 0) ok = 0; break; case "miesiac": if( e.options[e.selectedIndex].value == 0) ok = 0; break; case "rok": if( e.options[e.selectedIndex].value == 0) ok = 0; break; case "plec": if( e.options[e.selectedIndex].value == 0) ok = 0; break; case "regulamin": if( e.checked != 1) ok = 0; break; } if(ok == 1) document.getElementById(e.id+"_img").src = "good.png"; else document.getElementById(e.id+"_img").src = "bad.png"; return ok; } function CheckFormAll(){ var okAll=1; okAll = CheckForm(document.formularz.nick); okAll = CheckForm(document.formularz.haslo); okAll = CheckForm(document.formularz.haslo2); okAll = CheckForm(document.formularz.email); okAll = CheckForm(document.formularz.dzien); okAll = CheckForm(document.formularz.miesiac); okAll = CheckForm(document.formularz.rok); okAll = CheckForm(document.formularz.plec); okAll = CheckForm(document.formularz.regulamin); if(okAll != 1) {alert("Popraw błędy w formularzu"); return false;} } </script> <form name="formularz" action="plik.html" method="POST" onsubmit="return CheckFormAll();"> Nick: <input type="text" name="nick" id="nick" onkeyup="CheckForm(this);" onblur="CheckForm(this);"> <img src="null.png" id="nick_img"> Hasło: <input type="text" name="haslo" id="haslo" onkeyup="CheckForm(this);" onblur="CheckForm(this);"> <img src="null.png" id="haslo_img"> Powtórz hasło: <input type="text" name="haslo2" id="haslo2" onkeyup="CheckForm(this);" onblur="CheckForm(this);"> <img src="null.png" id="haslo2_img"> E-mail: <input type="text" name="email" id="email" onkeyup="CheckForm(this);" onblur="CheckForm(this);"> <img src="null.png" id="email_img"> Płeć: <select name="plec" id="plec" onchange="CheckForm(this);"> <option value="0" selected="selected">Wybierz płeć</option"> <option value="Kobieta">Kobieta</option"> <option value="Mężczyzna">Mężczyzna</option"> </select> <img src="null.png" id="plec_img"> Data urodzenia: <select name="dzien" id="dzien" onchange="CheckForm(this);"> <option value="0" selected="selected">Dzień</option"> <option value="1">1</option"> <option value="31">31</option"> </select> <img src="null.png" id="dzien_img"> <select name="miesiac" id="miesiac" onchange="CheckForm(this);"> <option value="0" selected="selected">Miesiąc</option"> <option value="1">Styczeń</option"> <option value="2">Luty</option"> </select> <img src="null.png" id="miesiac_img"> <select name="rok" id="rok" onchange="CheckForm(this);"> <option value="0" selected="selected">Rok</option"> <option value="2000">2000</option"> <option value="2001">2001</option"> </select> <img src="null.png" id="rok_img"> Regulamin <input id="regulamin" name="regulamin" id="regulamin" type="checkbox" value="1" class="checkbox" onchange="CheckForm(this);"> <img src="null.png" id="regulamin_img"> <input type="submit" name="prycisk" value="Wyślij"> </form>
Bartosz
14 sierpień 2009 - 17:34
Nieźle ;) Podoba mi się, lecz zapomniałeś o tym, że niekiedy user ma wyłączone np. js, a wtedy, co? Dobrze jakby pojawiał się kod z informacją np. "Twoja przęgląarka ma wyłączoną obsługę Javascript, aby wypełnić formularz musisz ją uaktywnić"...

Ogólnie robota na 5- ;)
aseeon
14 sierpień 2009 - 18:36
Jakby jeszcze było demo, no ale jest OK ode mnie.
Elektryk
14 sierpień 2009 - 20:04
Nieźle ;) Podoba mi się, lecz zapomniałeś o tym, że niekiedy user ma wyłączone np. js, a wtedy, co?...



Wtedy formularz też będzie działać. Dlatego tak ważny jest validate także po stronie serwera.
meverone
14 sierpień 2009 - 20:31
"OK" :]


Podobne tematy:
Spółdzielnia - Jak wykonać zadanie z kurami albo z warzywami
Kartridz do N64 jak wykonac ?
Jak wyciagnac karty z automatu ??
Archiwum - jak wykonać kopię w MGG Java na Sony Ericssonie?
Jak wykonać misję...
Program automatycznie sprawdzający pocztę ... czyli coś jak w tlenie