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:

<form id="formularz">
        Imię:<input type="text" name="imie" id="imie" class="element_formularza"><span id="imie_info"></span>
        <br>
        Nazwisko:<input type="text" name="nazwisko" id="nazwisko" class="element_formularza"><span id="nazwisko_info"></span>
        <br>
        ulica:<input type="text" name="ulica" id="ulica" class="element_formularza"><span id="ulica_info"></span>
        <br>
        Miejscowość:<input type="text" name="miejscowosc" id="miejscowosc" class="element_formularza"><span id="miejscowosc_info"></span>
        <br>
        Kod pocztowy:<input type="text" name="kodpocztowy" id="kodpocztowy" class="element_formularza"><span id="kodpocztowy_info"></span>
        <br>
        <input type="checkbox" id="kodrabatowy_posiadam"> Posiadam kod rabatowy :-)
        <br>
        <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>
        </br>
        
        </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

Dodaj komentarz