In articolul anterior, v-am aratat cum puteti valida rapid un formular, folosind libraria jQuery. Acolo demonstram cum se poate face validarea unor campuri cu ajutorul a cat mai putin cod.
Evident ca oricine si-ar dori mai mult de la sistemul lui de validare. Ar fi bine daca am putea sa specificam ce mesaje de eroare vrem sa apara pentru fiecare camp in parte si sa facem cateva reglaje fine la regulile de validare.
Despre asta vom discuta in acest articol. Cum putem sa ne folosim cat mai bine de flexibilitatea pe care jQuery ne-o pune la dispozitie. Nu voi insista pe elementele de baza si nici pe codul HTML, pentru ca am trecut prin asta in articolul trecut. Voi posta codul, dupa care il voi explica.
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#commentForm").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true,
},
comment: "required"
},
messages: {
name: {
required: "Trebuie sa ne dai un nume, sa stim cine comenteaza",
minlength: jQuery.format("You need to use at least {0} characters for your name.")
},
email: {
required: "Adresa de email este obligatorie.",
email: "Asta nu e adresa de email. Trebuie sa fie de forma adresa@email.ro"
},
comment: "Nu poti sa comentezi, daca nu scrii un comentariu."
}
});
});
</script>
Sa vedem ce e nou. Acum functia validate() ia doi parametrii: rules si messages. Parametrii sunt destul de descriptivi. Primul ne permite sa definim un set de reguli de validare, iar al doi-lea sa definim mesajele de eroare care sa apara atunci cand campurile nu sunt valide.
Regulile sunt definite pentru fiecare camp in parte prin sintaxa name: { }, email: { }, etc. Noutatea in aceasta sectiune, este o regula noua care apare la campul "name". Proprietatea minlength. Aceasta ne permite sa setam un numar minim de caractere pe care utilizatorul trebuie sa-l introduca. Poate fi foarte utila intr-un formular de cautare, unde daca s-ar cauta dupa una sau doua litere, am avea foarte multe rezultate. Evident exista si un maxlenght pentru a limita numarul de caractere pe care utilizatorul le poate introduce.
De asemenea, in sectiunea messages trebuie sa definim un mesaj de eroare care stie sa lucreze cu proprietatea minlenght. Pentru asta vom folosi functia jQuery.format(), iar {0} va fi inlocuit dinamic cu numarul de caractere definit in sectiunea rules pentru minlenght.
Acesta este un mic exemplu despre ceea ce poate sa faca libraria jQuery si plugin-ul de validare. Daca vreti sa aprofundati, gasiti documentatia aici, iar daca vreti sa aveti o baza de plecare, puteti sa folositi codul din acest demo.