24/25.01. Validacija web formi
Validacija podataka je mogućnost da se automatski proverava da li postoje greške dok korisnik popunjava web formu. Dodavanjem validacije podataka u kontrole, možete obezbediti da su podaci koje prikupljate tačni i dosledni. Na primer, možete da koristite proveru valjanosti podataka da biste obavestili korisnike ako greškom unese ime u polje koje se koristi za prikupljanje brojeva telefona, ili ako ne unesu na ispravan način email.
Ako obrazac sadrži greške u validaciji korisnici neće moći da pošalju formu dok se ne otklone ove greške.
Postoje 2 načina za validaciju formi na osnovu mesta izvršenja validacije: na strani servera (php, asp, java), a druga je na klijentskoj strani i za to se uglavnom koristi Java Script. Sem toga, i moderni browser-i imaju ugrađene validatore. O validaciji na serverskoj strani će biti priče neki drugi put.
Validacija na strani klijenta:
Validacija na klijentskoj strani treba da olakša unos podataka korisniku. Zbog toga je zgodno validirati podatke odmah, prilikom unosa.
1. Validacija u web browser-u:
Moderni web browser-i imaju inicijalnu validaciju forme. To se postiže atributom required u polju za unos podataka, npr <input type="text" name="ime" required="required"/>. Ovo će dovesti do toga da korisnik
ne može da pošalje formu (submit) sve dok ovo 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, password, ....
Dodatno, možete ubaciti šablone (engl. pattern) 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.
2. Validacija pomoću JavaScripta:
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.
Zadatak 1: U nastavku je link ka snimku (sa Youtube-a) sa jednostavnim primerom validacije web forme:
(umesto ovog videa biće kasnije postavljen opis kako je zadatak rađen na času)
U ovoj lekciji navodimo dva načina na koje se vrši provera. Prvo kreirate funkciju u kojoj se vrši provera. Zatim tu funkciju pozovete prilikom klika na dugme "Submit". Ili ćete da postavite poziv funkcije na dugme ili na formu:
1. način, kao akcija prilikom klika na dugme "submit":
<input type="submit" name="submit" id="submit" onclick="check()" />
2. način, kao reakcija na nivou forme - onSubmit:
<form onSubmit="return check()">
Zadatak br.2 upotrebićemo zadatak sa sledeće web stranice:
Validacija forme uz pomoć JavaScripta i regularnih izraza
Ako koristite ASP.NET:
i pravite web forme pomoću Microsoftovih alata, tamo u Toolbox-u postoje Kontrole za proveru web formu
Kontrole za validaciju su tip ASP.NET kontrola koje se koriste da provere korisnički unos podataka
prije nego što se obradi. Required field validator se obično koristi kod text box kontrola, ali se može koristiti i kod list kontrola. Range validator proverava da li je korisnik izvršio unos u odgovarajućem opsegu. Required field se povezuje sa kontrolama koje imaju obavezan unos. Ove kontrole nisu vidljive u runtime-u. Vidi se samo kontrola za prikaz greške, ukoliko greška postoji.
Validacija se izvršava na klijentskoj strani pre nego što se podaci proslede serveru na izvršavanje.
Reference (izvori):