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:
[pawn]
[/pawn]
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ć.
[pawn]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’;
}
}[/pawn]
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.
[pawn]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’);[/pawn]
Przyda się również przycisk “Wyślij”
[pawn]var wyslij = document.getElementById(’wyslij’);[/pawn]
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
[pawn]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);
}
}[/pawn]
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”.
[pawn]var pola = document.getElementsByClassName(’element_formularza’);[/pawn]
Utwórzmy obiekt, w którym zamieścimy podpowiedzi dla użytkownika:
[pawn]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’
}[/pawn]
Dla wszystkich elementów tablicy pola dodajmy zdarzenia onfocus (element aktywny) oraz onblur (element nieaktywny).
[pawn]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 = ”;
}
}[/pawn]
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
[pawn]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 = ”;
};
}
}[/pawn]
Adam Sawicki – programista aplikacji internetowych, obserwator nowych startup’ów i technologii webowych, autor kursu c++ dla początkujących cpp.jcom.pl