In acest articol vom discuta despre una din multele facilitati pe care le ofera libraria jQuery. Aceea de a face validarea formularelor.
De ce avem nevoie de validare client-side? Simplu. Pentru ca experienta web a utilizatorului sa fie una cat mai placuta si ergonomica. Este foarte neplacut sa trebuiasca sa completam un formular, dupa care sa dam Submit si sa faca refresh, doar ca sa ne aduca untr-o pagina de eroare in care ni se spune ca nu am completat niste campuri. Folosind o astfel de validare, incercam sa indrumam utilizatorul spre completarea corecta si completa a formularului, inainte ca acesta sa faca submit.
Acestea fiind spuse, tin sa mentionez ca aceasta metoda nu exclude validarea server-side. Este neaparat necesar ca datele introduse de utilizator sa fie verificate pe server, unde avem control total. Asta pentru ca multe browsere din ziua de azi ne permit sa dezactivam javascript-ul din cateva click-uri, ceea ce ar face aceasta validare inutila.
Vom avea ca baza de plecare, formularul pe care l-am construit intr-un articol anterior. Voi posta numai html-ul din articolul trecut, pentru a putea ilustra mai usor elementele care apar:
<!DOCTYPE html> <html> <head> <title>Formular de comentarii</title> </head> <body> <form action="foo.php" id="commentForm" method="post"> <ul> <li> <label for="name">Nume*</label> <input type="text" name="name" id="name" class="required" /> </li> <li> <label for="email">Email*</label> <input type="text" name="email" id="email" class="required email" /> </li> <li> <label for="website">Website</label> <input type="text" name="website" id="website" class="url" /> </li> <li> <label for="comment">Comentariu*</label> </li> <li> <textarea name="comment" id="comment"></textarea> </li> <li> <input class="submit" type="submit" value="Submit" /> </li> </ul> </form> </body> </html>
Vom vedea ca pentru o validare la cel mai simplu nivel, nu avem nevoie decat de foarte putin cod. In primul rand, trebuie sa includem libraria jQuery si plugin-ul de validare. Eu am ales sa le includ din surse hostate public pe internet. Puteti, la fel de bine, sa le descarcati de aici, respectiv aici si sa le hostati la voi in site.
<script src="http://code.jquery.com/jquery-latest.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
Dupa ce am inclus scripturile de care avem nevoie trebuie sa scriem o functie javascript care sa se foloseasca de ele:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#commentForm").validate();
});
</script>
Dupa cum vedeti, tot ce facem este sa selectem formularul cu id="commentForm" si sa chemam functia validate() fara niciun parametru.
Acum sa vedem ce anume declansaza validarea. Cei care au citit articolul trecut, in care am construit formularul, au avut ocazia sa observe ca am anticipat putin ceea ce urma sa se intample. Daca va uitati in codul de mai sus veti observa ca fiecare element de tip input are asignata una sau mai multe clase. De fapt, cam asta e tot ce avem de facut. Fiecare clasa e destul de descriptiva cu privire la ce anume valideaza.
Am folosit in exemplul de mai sus trei metode de validare de baza. Sa le explicam pe fiecare in parte:
- class="required" – este folosit pentru elementele care sunt obligatorii si valideaza ca utilizatorul a introdus date.
- class="email" – asa cum ii spune si numele, verifica daca utilizatorul a introdus o adresa de email valida
- class="url" – verifica daca utilizatorul a completat campul cu un url valid
In cazul in care doriti sa infumusesati mesajele de eroare, o puteti face astfel:
label.error {
display: block;
font-size: 12px;
color: #F00;
}
Functia validate(), intoarce in mod implicit erorile in elemente de tip label cu clasa error. Asfel, folosind acest selector, puteti sa faceti mesajele de eroare sa arate oricum doriti.
Am scris acest articol pentru ca am fost impresionat de metoda rapida si eleganta gasita de jQuery pentru a face validari. Bineinteles ca functia validate() este mult mai puternica decat atat. Suporta validari pentru intervale, posibilitatea personalizarii mesajelor de eroare si multe altele. Vom acoperi o parte din aceste facilitati intr-un articol viitor.
Gasiti un demo functional al formularului cu validare, la aceasta adresa. Si la final repet. Validarea client-side este eleganta, nu sigura. Aveti grija sa validati intotdeauna si la nivel de server, acolo unde aveti control asupra datelor.