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:
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.
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ę:
$(document).ready(function(){
// już jesteśmy w środku ;)
});
Trudne? Teraz podłączymy odpowiednie funkcje do sprawdzania poprawności formularza:
$('#contact').bind('submit', function(){
// regułki sprawdzające
});
Oczywiście, to wszystko wewnątrz bloku $(document).ready(). Teraz pozostaje nam przejście przez wszystkie elementy formularza i odpowiednie ich oznaczenie:
// "flaga" poprawności
var valid = true;
// dla wszystkich elementów (input, textarea, select) należących do bieżącego fomularza (wskazuje tu nań "this")
$(':input', this).each(function(){
// jeśli pole jest puste
if($(this).val()==''){
// oznacz jako źle wypełniony
$(this).addClass('invalid');
// ...i formularz do poprawki
valid = false;
}else{
// wszystko ok, jeśli pole zostało poprawione, usuń oznaczenie
$(this).removeClass('invalid');
}
});
Właściwie to tyle z walidacji. Wystarczy tylko za $.each() dodać kilka linijek:
if(!valid){
alert('Wypełnij wszystkie oznaczone pola i spróbuj ponownie.');
return false;
}
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:
$(document).ready(function(){
$('#contact').bind('submit', function(){
var valid = true;
$(':input', this).each(function(){
if($(this).val()==''){
$(this).addClass('invalid');
valid = false;
}else{
$(this).removeClass('invalid');
}
});
if(!valid){
alert('Wypełnij wszystkie oznaczone pola i spróbuj ponownie.');
return false;
}
});
});
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:
$('#contact').bind('submit', function(){
na
$('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.
Ale po co pisać od nowa klasę walidacji kiedy już taka istnieje? .