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