JS validacija, jednostavan način

Postoje 2 načina za validaciju formi na osnovu mesta izvršenja validacije. Jedna je obavezna server-side validacija (php, asp, java), a druga je na klijentskoj strani i za to se uglavnom koristi Java Script. Kažem uglavnom, jer moderni browser-i imaju ugrađene validatore.

Validacija na klijentskoj strani treba da olakša unos podataka korisniku. Nije zgodno da korisnik popuni sva polja, a onda da mu se izbaci greška i da počne ponovo unos formulara. Naravno, mogu da mu se ponove uneti podaci, ali programeri ne vole da pišu takve procedure, a i smara korisnika. Zbog toga je zgodno validirati podatke odmah, prilikom unosa.

Dakle, moderni brauzeri imaju inicijalnu validaciju forme. To se postiže atributom required u polju za unos, npr <input type="text" name="ime" required="required"/>. Ovo će inicirati da korisnik ne može da izvrši formu (submit) dok polje ne sadrži makar jedan karakter. Ova opcija nije dovoljna, ukoliko tražite određeni broj karaktera za unos ili neki konkretniji podatak. HTML5 podržava i druge tipove unosa, ne samo tipa “text”, već se može koristiti i email, number, tel, address, date, month, search, url, week, kao i poznati tip password. Postoje i zanimljiva polja tipa color i range, ali je ovo podržano samo od strane Google Chrome brauzera (kao i automatski date i time picker).

Dodatno, možete ubaciti paterne za unos, npr   <input type="tel" name="phone"  required="required" maxlength="15" pattern="[0-9-+ /]*" /> čime onemogućavate unos teksta u polje za broj telefona.

Postoji i dosta gotovih JS rešenja, jquery plagina za validaciju i skoro svi zahtevaju da posebno definišete koja se polja i na koji način validiraju. Može biti pregledno, ali i komplikovano prilikom kopiranja.

Pisao sam ranije takve skripte, ali sam tražio i neki novi način. Ono što već par godina koristim jeste da u sam html unesem potrebne podatke za validaciju, a da se forma autovalidira klikom na Submit.

Za ovo koristim jednu jedinu funkciju. Moglo je ovo da bude jquery plagin, da se razbije na sitnije delove, ali je to stvar slobodno izbora, moje je mišljenje da ovaj kod treba da bude brz i ne zahteva previše resursa.

https://github.com/agvozden/jsvalidator/blob/master/checkform.js


 

Kako koristiti

Može u kombinaciji sa ugrađenom browser validacijom, tom prilikom prvo browser vrši inicijalnu proveru, a zatim prepušta ovoj skripti. U tom slučaju se u poljima koristi atribut required.

Poziv ove funcije:

$().ready(function() {
$("form").submit(function() {
return checkForm($(this));
});
});

Ukoliko želite izbeći browser validaciju onda se može koristiti i kao klasa class=”required”, ili u samoj formi <form novalidate>

Funkcija, dakle koristi klasu required (ili atribut required) da bi pronašla polja koja se proveravaju. Koristi se i klasa error_message koja treba da sadrži poruku da forma nije validna. Ukoliko se setuje addClass onda nevalidna polja dobiju klasu error, i/ili u slučaju addSpan generiše se element <span class="error"> iza ovih polja, sa porukom koja je sadržana u title atributu.

Primer forme

<form method="post"><label for="name">Tvoje ime ili nadimak:*</label>
<input id="name" name="name" required="required" type="text" />
<label for="phone">Kontakt telefon:* </label>
<input id="phone" maxlength="15" name="phone" pattern="[0-9-+ /]*" required="required" type="tel" />
<label for="age">Koliko imaš godina:* </label>
<input id="age" maxlength="3" name="age" pattern="[0-9]*" required="required" type="number" />
<label for="email">Kontakt e-mail:* </label>
<input id="email" name="email" required="required" type="email" />
<label for="code_jaffa">Unesi kod:* </label>
<input id="code" name="code" required="required" type="text" />
<input id="tos_accept" name="tos_accept" required="required" type="checkbox" />
<a href="pravila.pdf" target="tos">prihvatam uslove</a></form>


Ova forma najpre koristi browser validaciju, sa ugrađenim paternima.

Konstrukcija polja:

input
type=”text, email, number, tel, password, checkbox”
required=”required” / class=”required”
minvalue=”min_value” maxvalue=”max_value”
data-confirm=”ref_field_id”

Atribut data-confirm koristimo kada je potrebno izvršiti dvostruku potvrdu, recimo unos password-a. Onda u prvo polje stavimo data-confirm=”password_confirm”, a drugo polje treba da ima id=”password_confirm”.

Postoji i opcija vezana za eksternu validaciju, ukoliko je potrebno da se neko polje proveri ajax-om, npr da li postoji korisničko ime, onda ta funkcija treba da upiše u atribut data-checkerror poruku, a ukoliko je ta provera u redu to polje treba ostaviti prazno.