JavaScript

JavaScript: Prosta walidacja formularzy

JavaScript: Prosta walidacja formularzy Walidacja błędnych danych formularzy po stronie przeglądarki jest bardzo dobrym pomysłem, który zaoszczędza czas odwiedzających nasze strony. Przyjrzyjmy się, jak uzyskać tego typu efekt za pomocą JavaScriptu.

Damian Wielgosik

1 2 3 »

Przyjmijmy, że mamy formularz z polami na wpisanie nicka (<input type="text">) oraz treści - <textarea>. Naszym zadaniem jest sprawdzenie, czy po wciśnięciu przez użytkownika przycisku Dodaj wartości poszczególnych pól zostały uzupełnione prawidłowo.

Pierwszym krokiem w tym celu będzie sprawdzenie, czy użytkownik uzupełnił każde wymagane pole. Jeśli jakiś element formularza będzie pusty, zablokujemy wysyłanie formularza i wyróżnimy czerwoną obwódką pole, w którym skrypt napotka błąd.

Dokument HTML

Stworzymy przykładowy dokument HTML, który zobrazuje to zagadnienie - patrz listing 1.

[+]

Listing 1

HTML

 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2. <html xmlns="http://www.w3.org/1999/xhtml" lang="pl-PL">
 3. <head>
 4. <title>Strona z formularzem</title>
 5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
 6. <style type="text/css">
 7. label {
 8.   display: block;
 9.   margin: 2px;
10. }
11. </style>
12. <!-- Nasz kod Javascript: -->
13. <script type="text/javascript"></script>
14. </head>
15. <body>
16.   <form method="post" action name="dodawanie_posta">
17.     <label>Nick: <input type="text" name="nick" value /></label>
18.     <label>Tresc <textarea name="content" rows="5" cols="20"></textarea></label>
19.     <input type="submit" value="dodaj" />
20.   </form>
21. </body>
22. </html>

Listing zwinięty - 22 linii

Jak widać na rysunku, nie ma tutaj żadnych udziwnień - dwa pola, przycisk submit. Formularz jest nazwany dodawanie_posta.

var formularz = document.forms['nazwa_formularza'];

Dzięki takiej konstrukcji możemy dostać się do określonego formularza i jego wszystkich elementów. Pomiędzy nawiasami kwadratowymi wpisujemy wartość atrybutu name interesującego nas formularza. Jak widać, mamy do czynienia z kolejnym przykładem rodzica i dziecka. Rodzicem jest cały dokument HTML (document), a dzieckiem formularze (.forms).

Do określonego formularza możemy również dostać się wpisując w nawiasy kwadratowe numer porządkowy formularza. Jeśli formularz, który jest przedmiotem naszego zainteresowania, występuje w dokumencie jako pierwszy, to możemy zastosować zapis document.forms[0]. Użyliśmy zera, ponieważ w informatyce liczymy od zera.

Zdarzenie onsubmit

Chcemy sprawdzić, czy użytkownik wprowadził poprawne dane po wciśnięciu przycisku submit. Oczywiście dysponując samym CSS-em i HTML-em nie jesteśmy w stanie tego zrobić. Z pomocą przychodzi kolejne zdarzenie Java- Script. Wiemy już, jak wykryć czy użytkownik naprowadził wskaźnik mysz na dany element (onmouseover) lub czy go kliknął (onclick). Podobnie postąpimy z formularzem, a mianowicie wychwycimy moment, kiedy użytkownik wyśle formularz przyciskiem Dodaj. Pomoże w tym zdarzenieonsubmit.

Onsubmit to zdarzenie charakterystyczne dla formularzy, które pozwala wykryć po stronie przeglądarki moment, kiedy dany formularz jest wysyłany.

Najpierw jednak zbudujmy funkcję Laduj, która po załadowaniu dokumentu sprawi, że nasz formularz będzie miał ustawioną właściwość onsubmit, odsyłającą do jakiejś funkcji, dajmy na to Verify.

[+]

JavaScript

1. <!-- Nasz kod Javascript: -->
2. <script type="text/javascript">
3. window.onload = Laduj;
4. function Laduj() {
5. }
6. function Verify() {
7. }
8. </script>

Listing zwinięty - 8 linii

Nakazaliśmy, aby za każdym wywołaniem strony na początku wykonała się funkcja Laduj. Musi ona dać znać formularzowi, że po jego wysłaniu ma wykonać się funkcja Verify sprawdzająca poprawność wpisanych danych. Problem w tym, jak dostać się do formularza, kiedy nie mamy jego id (wtedy użylibyśmy document.getElementById(), ale tutaj, umyślnie, nie chcemy tego). Na to też jest sposób!

9 lipca 2008

1 2 3 »

Powiązane publikacje

JavaScript: Limit znaków w formularzu

JavaScript: Dynamiczne dodawanie elementów formularza

JavaScript: Rozwijane menu

Kurs JavaScript (cz. 4): Dynamiczne elementy HTML

Kurs JavaScript (cz. 3): Dynamiczne elementy HTML

Kurs JavaScript (cz. 2): Dynamiczne elementy HTML

Kurs JavaScript (cz. 1): Dynamiczne elementy HTML

Skomentuj
ten artykuł

Komentarzy: 4

czwartek, 6.05.2010 14:28Tom

Dobrze opisany

czwartek, 8.04.2010 23:11hetman

Czy jest jakiś ukryty cel w pisaniu dodatkowej funkcji Laduj() i wykorzystaniu zdarzenia window.onload?
Nie lepiej dopisać onsubmit="Verify()" bezpośrednio w tagu form?

czwartek, 28.05.2009 03:11jxl

jeśli ściągniesz plik (ikonka dyskietki) nie powinno być problemu.
nie działa, bo treść na ostatecznym listingu w linii 28 jest zawinięta:
28. document.forms['dodawanie_posta'].content.style.border = "2px solid
#FF0000";
po przeniesieniu wartości po znaku # do poprzedniej linii wszystko powinno działać.

piątek, 16.01.2009 14:08bula

błąd? nie działa, czy w formularzu nie brakuje czegoś a dokładnie w przycisku "dodaj"? jeśli tak to czego bo jestem zielony..

Zobacz wszystkie komentarze »

Autor

Damian Wielgosik

Artykuły tego autora:

» JavaScript: Limit znaków w formularzu
[INTERNET Maker]
» JavaScript: Dynamiczne dodawanie elementów...
[INTERNET Maker]
» JavaScript: Rozwijane menu
[INTERNET Maker]
» Kurs JavaScript (cz. 4): Dynamiczne...
[INTERNET Maker]
» Kurs JavaScript (cz. 3): Dynamiczne...
[INTERNET Maker]

Pozostałe publikacje

JavaScriptu w kilku słowach

Od lat żadna technologia nie zagroziła JavaScriptowi, językowi uznawanemu za zabawkę dla dzieci. Czy uda się mu zachować popularność i zapewnić źródło utrzymania kolejnym programistom?

Polecamy:

Na skróty:

Nasze serwisy:

JavaScript

JavaScript: Prosta walidacja formularzy

Dokument HTML

Zdarzenie onsubmit

Autor

Damian Wielgosik

Pozostałe publikacje

JavaScriptu w kilku słowach

Newsletter