BETA
Aby się zalogować, najpiew wybierz portal.
Aby się zarejestrować, najpiew wybierz portal.
Podaj słowa kluczowe
Słowa kluczowe muszą mieć co najmniej 3 sąsiadujące znaki alfanumeryczne
Pole zawiera niedozwolone znaki

Baza wiedzy











Obsługa i walidacja formularzy

19-06-2013 13:48 | Krzysztof Idzik
W tym odcinku nauczysz się posługiwać formularzami. Dowiesz się również, w jaki sposób obsłużyć przyciski klawiatury użytkownika oraz jak dynamicznie walidować formularze.

Rozpoczęcie pracy

Przed rozpoczęciem pracy powinieneś:

  • Znać podstawy języka HTML,
  • Znać podstawy pozycjonowania css,
  • Zapoznać się z poprzednimi odcinkami kursu.

Implementacja

Utwórz na dysku odpowiednie katalogi oraz pobierz bibliotekę jQuery ze strony http://www.jquery.com/ (możesz również korzystać z poprzednich projektów omawianych w kursie).

Utwórz plik index.html, w sekcji <body></body> umieść kod (Skrypt 1) , który będzie strukturą formularza.

<div id="kumunikat_walidacji"> </div>
	<form action="#">
	<div id="login_blok">
		<div id="pole_login">
			Login: <input type="textbox" id="login" />
		</div>
		<div id="komunikat_login">
			<div id="komunikat_wielka_litera"></div>
		</div>
	</div>
	<div id="haslo_blok">
		<div id="pole_haslo">
			Hasło: <input type="password" id="haslo" />
		</div>
		<div id="komunikat_haslo">
			<div id="komunikat_liczba_znakow"></div>
		</div>
	</div>
	<div id="email_blok">
		<div id="pole_email">
			Email: <input type="textbox" id="email" />
		</div>
		<div id="komunikat_email">
			<div id="komunikat_znak_specialny"></div>
		</div>
	</div>
	<div id="przycisk">
		<input type="submit" value="Wyślij" />
	</div>
	</form>

Skrypt 1

Utwórz czysty dokument. Zapisz go pod nazwą "style", z rozszerzeniem .css. Utworzony plik umieść w katalogu z nazwą css. W dokumencie umieść następujący kod (Tabela 1) formatujący strukturę HTML:

Lp. Kod Objaśnienie
1. div { margin: 3px; } Marginesy w div
2. #login_blok, #haslo_blok, #email_blok, #przycisk {  
3. clear:both; Od nowego akapitu
4. }  
5. #pole_login, #pole_haslo, #pole_email {  
6. float:left; Opływanie z lewej
7. }  
8. #komunikat_login, #komunikat_haslo, #komunikat_email {  
9. float:left;  
10. padding-left: 20px; Lewy margines wew.
11. width: 250px; Szerokość elem.
12. font-family: arial; Krój czcionki
13. }  
14. .poprawny {  
15. padding: 5px; Margines wew.
16. color: green; Kolor czcionki
17. border: 3px solid green; Obramowanie
18. }  
19. .niepoprawny {  
20. padding: 5px;  
21. color: red;  
22. border: 3px solid red;  
23. }  
24. #kumunikat_walidacji {  
25. display:none; Ukrycie elementu
26. width: 250px;  
27. padding: 5px;  
28. color: blue;  
29. border: 3px solid blue;  
30. }  

Tabela 1

W sekcji <head></head> dołącz plik (Skrypt 2) ze stylami:

<link href="css/style.css" rel="stylesheet" type="text/css" />

Skrypt 2

Poniżej dołączenia linku do styli oraz biblioteki jQuery umieść skrypt (Skrypt 3) walidujący formularz:

$(document).ready(function () {
   $("#login").keyup(function() {
        var WzorLoginu = /^[A-Z]{1}[^\s]+$/;
        var login = $("#login").val();
        if (WzorLoginu.test(login)) 
        {
             var komunikat_wielka_litera = "Login zawiera na początku    wielką literę.";
             $("#komunikat_wielka_litera").removeClass("niepoprawny");
             $("#komunikat_wielka_litera").addClass("poprawny");
          $("#komunikat_wielka_litera").html(komunikat_wielka_litera); 
      } else {
         var komunikat_wielka_litera = "Login musi zaczynać się z wielkiej litery.";
         $("#komunikat_wielka_litera").removeClass("poprawny");
         $("#komunikat_wielka_litera").addClass("niepoprawny");
         $("#komunikat_wielka_litera").html(komunikat_wielka_litera);
     }
  });
  $("#haslo").keyup(function() {
     var haslo = $("#haslo").val();
     var wymagana_liczba_znakow = 6;
     var potrzeba_znakow = 6;
     var ilosc_znakow =  haslo.length;
     potrzeba_znakow = wymagana_liczba_znakow - ilosc_znakow;
     if(ilosc_znakow < 6) {
         var komunikat_liczba_znakow = "Do poprawności hasła brakuje jeszcze minimum " + potrzeba_znakow + " znaków.";
         $("#komunikat_liczba_znakow").removeClass("poprawny");
         $("#komunikat_liczba_znakow").addClass("niepoprawny");
         $("#komunikat_liczba_znakow").html(komunikat_liczba_znakow);
     } else { 
         var komunikat_liczba_znakow = "Hasło zawiera poprawną ilość znaków."; 
         $("#komunikat_liczba_znakow").removeClass("niepoprawny");
         $("#komunikat_liczba_znakow").addClass("poprawny");
        $("#komunikat_liczba_znakow").html(komunikat_liczba_znakow);
     } 
  });
  $("#email").keyup(function() {
     var email = $("#email").val();
     var znak_specialny = email.indexOf("@");
     if(znak_specialny > 0) {
         var komunikat_znak_specialny = "Poprawny adres email.";
         $("#komunikat_znak_specialny").removeClass("niepoprawny");
         $("#komunikat_znak_specialny").addClass("poprawny");
         $("#komunikat_znak_specialny").html(komunikat_znak_specialny);
     } else {
         var komunikat_znak_specialny = "Adres email musi zawierać znak @";
         $("#komunikat_znak_specialny").removeClass("poprawny");
         $("#komunikat_znak_specialny").addClass("niepoprawny");
         $("#komunikat_znak_specialny").html(komunikat_znak_specialny);
     }
  });
  $("form").submit(function() {
     var login_czy_pusty = $("#login").val();
     var haslo_czy_puste = $("#haslo").val();
     var email_czy_pusty = $("#email").val();
     var kumunikat_walidacji = "";
     var punkty_walidacji = 0;
     if(login_czy_pusty.length != 0) {  
        punkty_walidacji++;  
     } else { 
        kumunikat_walidacji = "Pole login jest wymagane. <br>"; }
     if(haslo_czy_puste.length != 0) {
        punkty_walidacji++; 
     } else { 
        kumunikat_walidacji = kumunikat_walidacji + " Pole haslo jest wymagane. <br>"; }
     if(email_czy_pusty.length != 0) {
        punkty_walidacji++; 
     } else { 
        kumunikat_walidacji = kumunikat_walidacji + " Pole email jest wymagane."; }
     if(punkty_walidacji == 3)
     {
        kumunikat_walidacji = "Wszystkie pola zostały wypełnione. ";
     }
     $("#kumunikat_walidacji").fadeIn();
     $("#kumunikat_walidacji").html(kumunikat_walidacji);
     return false;
  });
});

Skrypt 3

Wyjaśnienie kodu:

  • Linie 2-17: Akcja .keyup() odnosząca się do pola posiadającego ID z nazwą "login" odbywa się każdorazowo po wciśnięciu klawisza na klawiaturze przez użytkownika edytującego pole tekstowe "Login".
  • Linia 3: Zostaje użyty wzornik, którego zapis odpowiada za: [A-Z]{1} - Pierwsza litera wprowadzonego tekstu musi być wielka. [^\s]+ plus oznacza jeden lub więcej znaków, a [^\s] oznacza znak nie będący spacją.
  • Linia 5: Zostaje użyta metoda test(), która służy do sprawdzania, czy dane wyrażenie znajduje się w tekście.
  • Linia 10: Wstrzyknięcie kodu html przy użyciu akcji .html()

Efekt pracy (Rysunek 1) pokazujący dwie sytuacje walidacji powyższego pola:

Rysunek 1

  • Linie 18-35: Odnoszą się do pola posiadającego ID z nazwą "haslo" i odpowiadają za walidację tego pola. Po każdorazowym wciśnięciu przycisku na klawiaturze, sprawdzany jest warunek, czy użytkownik osiągnął minimalną ilość znaków.

Efekt pracy (Rysunek 2) pokazujący dwie sytuacje walidacji powyższego pola:

Rysunek 2

  • Linie 36-50: Odnoszą się do pola posiadającego ID z nazwą "email" i odpowiadają za walidację tego pola. Po każdorazowym wciśnięciu przycisku na klawiaturze, sprawdzany jest warunek, czy użytkownik wprowadził znak specjalny, wymagany w każdym adresie email (znak @).
  • Linia 38: Użycie metody indexOf(), która zwraca indeks pierwszego wystąpienia podciągu w ciągu. Dzięki tej metodzie można sprawdzić, czy użytkownik wprowadził znak @.

Efekt pracy (Rysunek 3) pokazujący dwie sytuacje walidacji powyższego pola:

Rysunek 3

  • Linie 51-76: Akcja .submit, wywoływana jest po wysłaniu formularza. Odpowiada za sprawdzenie, czy pola formularza zostały wypełnione i wyświetlenie odpowiednich komunikatów.
  • Linie  57, 61, 65: Użycie metody .length, która zwraca liczbę znaków w danym ciągu znaków.
  • Linia 75: return false; zapobiega przeładowaniu strony, po wciśnięciu przycisku "wyślij".

Efekt pracy (Rysunek 4) przedstawia sytuacje, gdy użytkownik nie wypełni pól formularza:

Rysunek 4

Efekt pracy (Rysunek 5) przedstawia sytuacje, gdy użytkownik wypełni pola formularza:

Rysunek 5

Podsumowanie

W tym odcinku nauczyłeś posługiwać się formularzami. Dowiedziałeś się również, w jaki sposób obsłużyć przyciski klawiatury użytkownika oraz jak dynamicznie walidować formularze. Poznałeś jak tworzy się wzorniki oraz metody ułatwiające sprawdzanie wartości wprowadzonych przez użytkownika.

Gotowy projekt tego odcinka znajdziesz pod linkiem http://sdrv.ms/11l3Llp

tagi: jQuery

Komentarze 0

pkt.

Zaloguj się lub Zarejestruj się aby wykonać tę czynność.