Zgodnie z obietnicą daną w poprzedniej części artykułu przystępujemy do walidacji formularza. Rzeczą absolutnie niezbędną do realizacji tego zadania będzie…formularz:

<form id="formularz">
        Imię:<input type="text" name="imie" id="imie" class="element_formularza"><span id="imie_info"></span>

Nazwisko:<input type="text" name="nazwisko" id="nazwisko" class="element_formularza"><span id="nazwisko_info"></span>

ulica:<input type="text" name="ulica" id="ulica" class="element_formularza"><span id="ulica_info"></span>

Miejscowość:<input type="text" name="miejscowosc" id="miejscowosc" class="element_formularza"><span id="miejscowosc_info"></span>

Kod pocztowy:<input type="text" name="kodpocztowy" id="kodpocztowy" class="element_formularza"><span id="kodpocztowy_info"></span>

<input type="checkbox" id="kodrabatowy_posiadam"> Posiadam kod rabatowy :-)

<span id="kodrabatowy_calosc" style="visibility:hidden">Kod rabatowy:
<input id="kodrabatowy" type="text" name="kodrabatowy" class="element_formularza">
<span id="kodrabatowy_info"></span>
<span id="kodrabatowy_error"></span>
</span>

</form>        <button id="wyslij">Wyślij</button>

Zakładam, że wszystko jest tutaj jasne. Chcemy, aby po zaznaczeniu checkboxa “Posiadam kod rabatowy :-)” pojawiło się miejsce na wpisanie posiadanego numeru. To już umiemy zrobić.

var kodRabatowy;

kodRabatowy = document.getElementById('kodrabatowy_posiadam');

kodRabatowy.onclick = function(e){

e = e || window.event;

if(e.target.checked){
document.getElementById('kodrabatowy_calosc').style.visibility = ‘visible’'';
} else {
document.getElementById('kodrabatowy_calosc').style.visibility = 'hidden';
}
}

Co prawda nie ma to wiele wspólnego ze sprawdzaniem poprwaności wprowadzonych danym, ale jest to jak najbardziej realny przykład. Aby sprawdzić wszystkie pola w formularzu, będziemy musieli znać ich wartości. Zacznijmy od pobrania całych elementów.

var imie = document.getElementById('imie');
var nazwisko = document.getElementById('nazwisko');
var ulica = document.getElementById('ulica');
var miejscowosc = document.getElementById('miejscowosc');
var kodpocztowy = document.getElementById('kodpocztowy');
var kodrabatowy_posiadam = document.getElementById('kodrabatowy_posiadam');

Przyda się również przycisk “Wyślij”

var wyslij = document.getElementById('wyslij');

Walidacja formularza powinna nastąpić po próbie jego wysłania, czyli w zdarzeniu onclick. Po kolei sprawdzimy, czy wartości wpisane do formularza są różne od pustego stringa. Błędy zapiszemy do zmiennej błąd

wyslij.onclick = function(e){

var blad = '';

if(imie.value == ''){
blad = blad + 'Podaj imie, ';
}
if(nazwisko.value == ''){
blad = blad + 'Podaj nazwisko, ';
}
if(ulica.value == ''){
blad = blad + 'Podaj ulicę, ';
}
if(miejscowosc.value == ''){
blad = blad + 'Podaj miejscowość, ';
}
if(kodpocztowy.value == ''){
blad = blad + 'Podaj kod pocztowy, ';
}

if(kodrabatowy_posiadam.checked){ // sprawdź tylko wtedy, gdy checkbox jest zaznaczony
var kodrabatowy = document.getElementById('kodrabatowy');
if(kodrabatowy.value == ''){
blad = blad + 'Podaj kod rabatowy, ';
}
}

if(blad == ''){
alert('Wysyłamy towar');
} else {
alert(blad);
}
}

Widzimy, że do pobrania wartości z elementu formularza używamy własności value.

Dodajmy do naszej mini aplikacji ułatwienie dla użytkownika w postaci podpowiedzi pojawiającej się przy aktualnie aktywnym polu. Pobierzmy wszystkie elementy klasy “element_formularza”.

var pola = document.getElementsByClassName('element_formularza');

Utwórzmy obiekt, w którym zamieścimy podpowiedzi dla użytkownika:

var info = {
imie: 'Tutaj wpisz swoje imie',
nazwisko: 'Tutaj wpisz swoje nazwisko',
ulica: 'Tutaj wpisz ulicę, na której mieszkasz',
miejscowosc: 'Tutaj wpisz miejscowość w której m-ieszkasz',
kodpocztowy: 'Tutaj wpisz kod pocztowy swojej miejscowości',
kodrabatowy: 'Tutaj wpisz swój kod rabatowy'
}

Dla wszystkich elementów tablicy pola dodajmy zdarzenia onfocus (element aktywny) oraz onblur (element nieaktywny).

for(var i = 0; i < pola.length; i++){

    pola[i].onfocus = function(e){
        document.getElementById(e.target.id+'_info').innerHTML = info[e.target.id];
    }

    pola[i].onblur = function(e){
        document.getElementById(e.target.id+'_info').innerHTML = '';
    }
}

Od teraz użytkownik bez problemu wprowadzi swoje dane.

Teraz wersja zaawansowana 🙂 Chcemy, aby informacja dotycząca danego pola pojawiła się po najechaniu kursorem myszki i zniknęła gdy kursor takowe pole opuści. Skorzytamy ze zdarzeń onmouseover i onmouseout. Zmodyfikujemy też zdarzenia onfocus i onblur, aby informacja nie znikała, gdy pole jest aktywne

for(var i = 0; i < pola.length; i++){

    pola[i].onmouseover = function(e){
            document.getElementById(e.target.id+'_info').innerHTML = info[e.target.id];
        };
        pola[i].onmouseout = function(e){
            document.getElementById(e.target.id+'_info').innerHTML = '';
        };

    pola[i].onfocus = function(e){
        document.getElementById(e.target.id+'_info').innerHTML = info[e.target.id];
	// pole aktywne, usuń zdarzenia myszki
        this.onmouseover = null;
        this.onmouseout = null;
    }

    pola[i].onblur = function(e){
        document.getElementById(e.target.id+'_info').innerHTML = '';
	// pole nieaktywne, ustaw zdarzenia myszki
        this.onmouseover = function(e){
            document.getElementById(e.target.id+'_info').innerHTML = info[e.target.id];
        };
        this.onmouseout = function(e){
            document.getElementById(e.target.id+'_info').innerHTML = '';
        };
    }
}

Adam Sawicki – programista aplikacji internetowych, obserwator nowych startup’ów i technologii webowych, autor kursu c++ dla początkujących cpp.jcom.pl