Kurs JavaScript - Walidacja formularza  

Autor: Bożena Jurczyk

Opublikowano: 2011-12-22

Jednym z najbardziej powszechnych zastosowań języka JavaScript jest walidacja danych, wprowadzanych za pomocą formularzy. Co mamy na myśli mówiąc o walidacji? Po pierwsze nie chcemy, aby użytkownik przesyłał niepełne dane. Możemy również wskazać, jakiego formatu powinna być zawartość pól tekstowych. Oczywiście, w celu zachowania bezpieczeństwa, niezbędna jest również walidacja po stronie serwera, jednak dobrze przemyślane walidatory mogą znacznie przyspieszyć proces związany z poprawnym przetwarzaniem formularzy, bez potrzeby każdorazowego przesyłania niepoprawnych danych na serwer.

Przed wykonaniem zadań powinieneś wiedzieć:

• jak tworzyć strony internetowe
• jak tworzyć funkcje w języku JavaScript

Po wykonaniu zadań nauczysz się:

• podstawowych zasad walidacji pól formularzy.

Implementacja

W przeglądarce Internet Explorer (od wersji 8) otwórz stronę internetową jForm1.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, zobacz Jak przygotować stronę samouczka JavaScript.

Twoim zadaniem będzie wykonanie dwóch prostych walidacji pól tekstowych.

Wymagane pole

Niektóre dane, takie jak login, hasło, lub e-mail, często są niezbędne dla utrzymania spójności danych. Dlatego też musisz w swoich formularzach zabezpieczyć się przed próbą ich pominięcia przez użytkownika.

1. Otwórz stronę internetową jForm1.html w dowolnym edytorze tekstowym i znajdź element formularza.
2. W atrybucie "onSubmit" tego elementu, wpisz "return validate(this)":

<form method="post" onsubmit="return validate(this);">

3. Następnie znajdź element przycisku i wpisz to samo określenie jako wartość atrybutu "onClick":

<input type="submit" value="Prześlij" onClick="return validate(document.forms[0])"/>

4. W tej samej lokalizacji co plik jForm.html, stwórz plik o nazwie JavaScript.cs, a następnie otwórz go w dowolnym edytorze tekstowym i dopisz do niego następującą funkcję:

function validate(form) {
    if(form['firstname'].length <= 0 || form['lastname'].length <= 0){
        alert('Imię i nazwisko nie mogą być puste!');
        return false;
    }
    return true;
}

5. Sprawdź działanie funkcji: klikając na przycisk "Prześlij" lub wciskając Enter, przy pustych polach formularza odnoszących się do imienia lub nazwiska, powinieneś zobaczyć alert tak, jak na Rys. 1.

Rys. 1. Alert informujący o braku informacji w polach odnoszących się do imienia i nazwiska.

Informacja

Funkcja walidująca pole tekstowe pobiera z formularza zawartość pól tekstowych z imieniem i nazwiskiem, a następnie sprawdza ich długość. W przypadku, gdy jedno z nich jest puste, wyświetla alert, jednocześnie zwracając wartość false z funkcji. Zapobiega to przesłaniu strony.

Walidacja hasła

W przypadku hasła, pole nie tylko nie może być puste, ale zazwyczaj jego długość musi mieć określony zakres. Zdarza się też, iż w formularzu występuje drugie pole, potwierdzające wcześniej wpisane hasło.

Otwórz plik JavaScript.js w dowolnym edytorze tekstowym, zmodyfikuj funkcję validate() tak, aby ostatecznie wyglądała następująco:

function validate(form) {
    if(form.firstname.value.length <= 0 || form.lastname.value.length <= 0){
        alert('Imię i nazwisko nie mogą być puste!');
        return false;
    }
    if(form.pass.value.length < 3 || form.pass.value.length > 7){
        alert('Długość hasła musi być z zakresu (3 - 7)!');
        return false;
    }
    if(form.pass.value != form.passConfirm.value){
        alert('Podane hasła nie zgadzają się!');
        return false;
    }
    return true;
}

6. Następnie, nie wpisując niczego w polu hasła, wybierz przycisk "Prześlij" lub wciśnij Enter. Powinieneś otrzymać alert tak, jak na Rys.2.

Rys. 2. Alert informujący o błędnej długości hasła.

Wpisz różne wartości w polu odnoszącym się do hasła i w polu potwierdzenia hasła. Powinieneś otrzymać alert tak, jak na Rys. 3.

Rys. 3. Alert informujący o wpisaniu różnych wartości w polu hasła.

Informacja

Funkcja została zmodyfikowana tak, aby sprawdzić, czy dwa pola tekstowe zawierają tę samą zawartość. Najpierw pole tekstowe poddawane jest walidacji, aby upewnić się, że nie jest puste, a następnie porównywane jest ono z polem potwierdzenia hasła.

Podsumowanie

W tym samouczku dowiedziałeś się, w jaki sposób sprawdzić, czy pole tekstowe w formularzu zostało wypełnione przez użytkownika. Dowiedziałeś się także, w jaki sposób zapobiec przeładowaniu strony w przypadku, jeśli określone wymagania nie zostaną spełnione. Zdobyłeś informacje, jak walidować poprawność wprowadzanego hasła z polem potwierdzenia hasła.

 

---