eRIZ’s weblog

PHP, webdesign, Linux, Windows i inne, bo nie samym chlebem człowiek żyje
Serdecznie zapraszam do udziału w ANKIECIE

jQuery i prosta walidacja formularzy

Tworząc formularz kontaktowy - oprócz oczywistej walidacji po stronie serwera - warto sprawdzać jego poprawność również po stronie klienta. Pozwala to oszczędzić nie tylko czas, ale również i nerwy - przykładowo, w przypadku korzystania z IE i wypisaniu tylko komunikatu wypełnij wszystkie pola, spowodujemy drastyczne podirytowanie gościa, gdyż jego “przeglądarka” nie przywróci mu poprzednio wpisanych danych do formularza. Wiem, że IE traci na popularności (i dobrze!), ale pani Jadzia z sekretariatu też powinna być zadowolona z odwiedzin na naszej stronie.

Klasycznie, zaczniemy od studium przypadku.

Prolog

Z racji tego, iż nie będziemy sprawdzać poprawności jakichś formularzy aplikacyjnych, posłużymy się naprawdę prostym i stosunkowo łatwo rozbudowywalnym skryptem. Załóżmy, że korzystamy z formularza tego typu:

  1. <form id="contact" method="post" action="/contact">
  2.         <dl>
  3.                 <dt><label for="fsender">imię i nazwisko</label></dt>
  4.                 <dd><input type="text" name="sender" id="fsender" /></dd>
  5.                
  6.                 <dt><label for="fmail">adres e-mail</label></dt>
  7.                 <dd><input type="text" name="mail" id="fmail" /></dd>
  8.                
  9.                 <dt><label for="frecipient">odbiorca</label></dt>
  10.                 <dd>
  11.                         <select name="recipient" id="frecipient">
  12.                                 <option value="">wybierz</option>
  13.                                 <option value="redaktor1">Redaktor 1</option>
  14.                                 <option value="redaktor2">Redaktor 2</option>
  15.                                 <option value="redaktor3">Redaktor 3</option>
  16.                         </select>
  17.                 </dd>
  18.                
  19.                 <dt><label for="fmessage">wiadomość</label></dt>
  20.                 <dd><textarea cols="100%" rows="20" name="message" id="message"></textarea></dd>
  21.         </dl>
  22.        
  23.         <p><label for="fsubmit" title="wyślij"></label><input type="submit" value="wyślij" /></p>
  24. </form>

Nadawca, adres e-mail, odbiorca i treść wiadomości. Można, oczywiście, pominąć odbiorcę, ale to nie jest problem. ;)

Idąc z duchem nowoczesności, skorzystamy z frameworka (jQuery) oraz nieinwazyjnego podpinania zdarzeń. Do sekcji <head> dołączamy odwołanie do biblioteki oraz naszego skryptu, który umieścimy w pliku contact.js.

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/contact.js"></script>

To tyle, jeśli chodzi o dodawanie jakichkolwiek innych skryptów w pliku HTML. onclick/blur/focus precz!

walidacja

I tu zaczniemy tzw. poezję, którą początkuje już sam slogan write less, do more. Zakładamy sobie na początku taki scenariusz. W przypadku, gdy wszystkie pola są poprawnie wypełnione, skrypt nie “powie” nic. Natomiast, jeśli będzie choć jedno niewypełnione pole (value=”"), zostanie dodana klasa invalid, która może oznaczyć pole np. czerwoną obwódką. To już zależy od regułek, jakie umieścimy w CSS. ;)

Skorzystamy z konstrukcji $(document).ready(), która uruchamia zdarzenia zaraz po wczytaniu “newralgicznych” elementów strony, czyli drzewa DOM. W przeciwieństwie do czasów Netscape’a i konstrukcji window.onload/<body onload=”"> przeglądarka nie czeka na np. wczytanie wszystkich obrazków i uruchamia skrypty wtedy, gdy tego potrzebujemy. Owszem, mogą być potrzebne wszystkie elementy (np. jakaś efektowna animacja), wtedy można skorzystać z kombinacji ready() i onload, lecz nie zawsze jest to potrzebne (czytaj: prawie wcale ;P). Korzystajanie ze starego rozwiązania spowodowałoby, że np. odnośnik do obrazka systemu statystyk drastycznie opóźniłoby działanie całego oskryptowania.

To tyle nt. teorii, pora na praktykę:

  1. $(document).ready(function(){
  2.         // już jesteśmy w środku ;)
  3. });

Trudne? ;) Teraz podłączymy odpowiednie funkcje do sprawdzania poprawności formularza:

  1. $('#contact').bind('submit', function(){
  2.         // regułki sprawdzające
  3. });

Oczywiście, to wszystko wewnątrz bloku $(document).ready(). Teraz pozostaje nam przejście przez wszystkie elementy formularza i odpowiednie ich oznaczenie:

  1. // "flaga" poprawności
  2. var valid = true;
  3. // dla wszystkich elementów (input, textarea, select) należących do bieżącego fomularza (wskazuje tu nań "this")
  4. $(':input', this).each(function(){
  5.         // jeśli pole jest puste
  6.         if($(this).val()==''){
  7.                 // oznacz jako źle wypełniony
  8.                 $(this).addClass('invalid');
  9.                 // ...i formularz do poprawki
  10.                 valid = false;
  11.         }else{
  12.                 // wszystko ok, jeśli pole zostało poprawione, usuń oznaczenie
  13.                 $(this).removeClass('invalid');
  14.         }
  15. });

Właściwie to tyle z walidacji. Wystarczy tylko za $.each() dodać kilka linijek:

  1. if(!valid){
  2.         alert('Wypełnij wszystkie oznaczone pola i spróbuj ponownie.');
  3.         return false;
  4. }

return false “mówi” przeglądarce, aby ta nie przetwarzała formularza dalej, czyli nie wysyłała go do serwera. Jeśli użytkownik poprawi pola i kliknie jeszcze raz na wyślij, formularz zostanie wysłany. To wszystko. ;)

epilog

Cały kod zawarty w pliku contact.js wygląda tak:

  1. $(document).ready(function(){
  2.         $('#contact').bind('submit', function(){
  3.         var valid = true;
  4.  
  5.         $(':input', this).each(function(){
  6.             if($(this).val()==''){
  7.                 $(this).addClass('invalid');
  8.                 valid = false;
  9.             }else{
  10.                 $(this).removeClass('invalid');
  11.             }
  12.         });
  13.        
  14.         if(!valid){
  15.             alert('Wypełnij wszystkie oznaczone pola i spróbuj ponownie.');
  16.             return false;
  17.         }
  18.        
  19.     });
  20. });

Powyższy kod nie jest jednak ograniczony tylko do jednego formularza. Dodanie walidacji do innego jest bardzo łatwe. Wystarczy użyć selektorów, jakie oferuje jQuery, przykładowo, sprawdzamy formularze, które mają nadaną klasę validate. Wystarczy zmiana jednej linijki:

  1. $('#contact').bind('submit', function(){

na

  1. $('form.validate').bind('submit', function(){

Zaletą tego rozwiązania jest fakt, iż nie musimy tworzyć osobnej regułki dla każdego elementu formularza. Wystarczy, że nieprawidłowe wypełnienie będzie jednoznaczne z jego pustą wartością. Oczywiście, nic nie stoi na przeszkodzie, żeby sprawdzać jakieś bardziej złożone regułki, np. poprawność wpisanego adresu e-mail, ale o tym w następnej części. ;)

7 komentarzy

dopisz swój :: trackback :: RSS z komentarzami

RSS z komentarzami :: trackback

Skomentuj

Możesz używać znaczników XHTML. Dozwolone są następujące tagi: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Wszystkie komentarze przechodzą przez moderację oraz filtry antyspamowe. Nie zostanie opublikowany komentarz, jeśli:

  • Jego treść obraża kogokolwiek.
  • W treści znajdują się wulgaryzmy i słownictwo ogólnie uznane za nieprzyzwoite.
  • Mam wątpliwości co do autora wpisu (Wszelkie anonimy są kasowane - niezależnie od zawartości - wpisz prawdziwy e-mail. Jeśli usunąłem, Twoim zdaniem, komentarz niesłusznie - daj znać). Zdarza się, iż sprawdzam kim jest komentujący.
  • Zawiera jakąkolwiek formę reklamy.

Szufladka