Krótki wstęp dla rozpoczynających naukę JavaScript – Kontynuacja 2

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]

Imię:

Nazwisko:

ulica:

Miejscowość:

Kod pocztowy:

Posiadam kod rabatowy 🙂

[/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

Dodaj komentarz

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.