jQuery validacija forme – equalTo

jQuery JS library nije više nikakva novost. Svi mi je, manje-više, eksploatišemo kad god se za to ukaže prilika. Moja lična zamjerka njenom razvojnom timu, iako sam im beskrajno zahvalan, je što nisu napisali malo bolje tutoriale za one koji se tek upoznaju sa ovom JS “bibliotekom”. Iz tog razloga objavljujem ovaj post, nadajući se da će se neko njime okoristiti kako bi riješio problem na koji sam i ja naišao.

Naime, desilo se da mi je bila potrebna validacija jedne malo veće forme, sa specifičnim uslovima ili pravilima (rules). Generalno, u podešavanju Validate() pluglin-a za jQuery nema ništa teško niti sporno. Ukoliko ste snimili biblioteku i plugin u root direktorij (folder) vašeg radnog fajla onda je dovoljno uvrstiti dva script tag-a:

<script type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

Naredni script tag pokreće plugin, odnosno funkciju validate().

<script>
 $(document).ready(function(){
 $("#IMEFORME").validate();};
</script>

Ukoliko niste dali nikakvu specifikaciju za polja koja se nalaze u formi, jQuery će izvršiti tzv “default validation“, gdje će za svako polje poslati poruku da je ovabezno “required” i poruku ispisati uz svako od polja pripadajuće forme.

Oni koji su ranije koristili Validate() plugin znaju da je unutar funkcije validate(); moguće definisati i posebne uslove, kao i svakom od polja dodijeliti specifilni errormessage, ukoliko je to potrebno. Od posebnog interesovanja, za mene lično, bio je rule “equalTo“, koji se koristi za potvrdu identične vrijednosti dvaju polja unutar jedne forme. U primjeru koji ću ovdje navesti, potrebno je potvrditi e-mail i password za demonstracionu formu. Prvo ćemo postaviti izgled i setup forme.

Forma sadrži sedam polja, respektivno: Ime, Prezime, E-mail, Potvrdi e-mail, Website, Password, Potvrdi password. Kompletnu skriptu, sa HTML-om, stavit ću vam na raspolaganje na kraju teksta (ispod linije), sada želim samo naglasiti šta je bio problem cijelo vrijeme.

Naime, postoji jedna začkoljica u postavljanju uslova (rules) i poruka kod formi u kojima je nužno koristiti “equalTo“. Ta je: ne treba u uslovima (rules) za  potvrdno polje koristiti required, niti u ispisu (messages) koristiti išta osim promjene osnovne (default) poruke.  Ona se vrlo lahko postavi, ali je bila prava muka da se otkrije šta je zapravo u pitanju. Ukoliko želimo potvrdu polja “E-mail” (id & name = “fld_email”), upravo je to polje koje će biti model za “equalTo” akciju, što praktično znači da će jedini uslov (rules) za potvrdno polje “Potvrdi e-mail” (id & name = “fld_emailagain”) biti da je jednak polju čiji model prati > { equalTo: “#fld_email” }. Sve će biti jasnije kad vidite potpun kod. Isto pravilo važi i za “Password” polje. Polje koje odgovara labeli “Password” (id & name = “fld_pass”) će biti model, a potvrdno polje će ga samo pratiti > { equalTo: “#fld_passconfirm” }. Evo i cijele funkcije, sa porukama (unosi se odmah nakon prva dva skriptna tag-a):

<script>
 $(document).ready(function(){
 $("#updateform").validate({

 rules: {
 fld_firstname: "required",
 fld_lastname: "required",
 fld_email: {required:true, email:true},
 fld_emailagain: {equalTo: "#fld_email"},
 //fld_web: "required",
 fld_pass: {required:true, minlength:5, maxlength:12},
 fld_passconfirm: {equalTo: "#fld_pass"}
 },
 messages: {
 fld_firstname: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Upišite Vaše ime!</b></font>",
 fld_lastname: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Upišite Vaše prezime!</b></font>",

 fld_email: { 
 required: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Upišite Vašu e-mail adresu!.</b></font>",
 email: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Format e-mail adresse nije validan!</b></font>" 
 },
 fld_emailagain: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Potvrdite vašu e-mail adresu!</b></font>",
 //fld_web: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Upišite web adresu!</b></font>",                
 fld_pass: { 
 required: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Obavezni se unijeti password!</b></font>",
 minlength: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Minimalna dužina passworda: 5 znakova!</b></font>",
 maxlength: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Maksimalna dužina passworda: 5 znakova!</b></font>" 
 },
 fld_passconfirm: "<font color=\"#FF0000\" size=\"1\"><b>&nbsp;Morate potvrditi password!</b></font>"
 }        
 });
 });
</script>

jQuery će vas odmah, dok unosite vrijednosti u odgovarajuća polja, opomenuti ukoliko niste ispunili neki od definisanih uslova (rules). Primjetit ćete, ukoliko ste analizirali kod, da polje “Web” nije obavezno, jer se ispred njega nalaze dvije kose crte, što pretvara ovaj dio koda u obični komentar. Brisanjem “//” ispred “fld_web” u obje sekcije – rules i messages, učinićete i ovo polje obaveznim za unos.

Na kraju, u akcije naše forme dodajemo komad koda koji će potvrditi da je validacija bila uspješna:
<form action=”javascript:alert(‘Validacija forme uspješna!’)”>.

Naravno, kao što znate, umjesto JS, na action parametru vašeg pravog programa našla bi se putanja do neke izvršne skripte, na primjer submit.php.

Da sumiramo. jQuery validacija je doista jednostavna. U prilogu imate primjerak ovog koda – cijelu skriptu. Problem na koji sam ja naišao odnosio se na potvrdu određenog polja. Dakle, potvrdno polje ne treba da sadrži parametar required. Šta više, sve što treba da sadrži u uslovima (rules) je: {equalTo: “#IME_POLJA_MODELA”}. U porukama (messages) se mijenja samo default message u vama željeni, na primjer:
fld_passconfirm: “<font color=\”#FF0000\” size=\”1\”><b>&nbsp;Morate potvrditi password!</b></font>”
.

Napomena: forma je testirana,…radi bez grješke!


jQuery validacija :: Download

2 thoughts on “jQuery validacija forme – equalTo

    • Kriv je FBI, koji je ugasio MegaUpload 🙂 Najveći dio skripte je već u ovom postu, a ukoliko ti je potrebno – mogu napisati novi sample, pa ti postaviti… gledaću i link da aktualiziram. Hvala na posjeti 😉

Komentariši

Upišite vaše podatke ispod ili kliknite na jednu od ikona da se prijavite:

WordPress.com logo

You are commenting using your WordPress.com account. Odjava /  Promijeni )

Google photo

You are commenting using your Google account. Odjava /  Promijeni )

Twitter slika

You are commenting using your Twitter account. Odjava /  Promijeni )

Facebook fotografija

You are commenting using your Facebook account. Odjava /  Promijeni )

Povezivanje na %s