Spoznali bomo
- Kako z JavaScriptom preverimo vnose uporabnika v polja obrazca
V gradivu se nahaja spletna stran obrazec, ki vsebuje spletni obrazec. Datoteko preimenuj v 19vaja-JS-priimek-ime.html. S pomočjo JavaScripta prevri obrazec tako, kot prikazujeta spodnja slika in video.
Koda JavaScript
- V vnosnih poljih preveri, če je bil v polje vnesen niz in dolžino vnesenega niza, kot je prikazano na sliki. Če niz ni vnesen, naj se odpre opozorilno okno z ustreznim napisom, vnosno polje naj se opozorilno obarva (
document.getElementById("ime").style.backgroundColor = "#e9967a";) in v njega naj se postavi kurzor (document.obrazec.ime.focus();) - Pri vnosu poštne številke deklarira spremenljivko in ji priredi vrednost vnosa v polje, preveri ali je vnos število in ali je število štirimestno
- Pri spustnih seznamih preveri, če je bila izbrana vrednost, sicer naj se odpre opozorilno okno in spustni seznam naj se opozorilno obarva
- Pri vnosu letnice rojstva deklarira spremenljivko in ji priredi vrednost vnosa v polje, preveri ali je vnos število in ali je letnica med letoma 1900 in tekočim letom
- Pri vnosu GSM deklarira spremenljivko in ji priredi vrednost vnosa v polje, preveri ali je vnos število in ali je število 9 mestno
- Pri e-mailu preveri, če je med besedilom znak @ in če niz na ustreznem mestu vsebuje znak .
- V izbirnem polju preveri, če je izbran krožek, če krožek ni izbran naj se prikaže opozorilno okno, izbirno polje pa naj se opozorilno obarva
- V poljih za označevanje preveri, če je katero polje izbrano. To stori tako, da z zanko po vrsti pregleduje vsa polja v obrazcu, dokler ne pride do konca obrazca ali do označenega polja. Če ni nobeno polje označeno, naj se odpre opozorilno okno z ustreznim napisom. Označena so lahko največ 3 polja
- V poljih za izbiranje preveri, če je katero polje izbrano. To stori tako, da z zanko po vrsti pregleduje vsa polja v obrazcu, dokler ne pride do konca obrazca ali do označenega polja. Če ni nobeno polje označeno, naj se odpre opozorilno okno z ustreznim napisom
Slika spletne strani z navodili kaj je potrebno preveriti z JavaScriptom v posameznih poljih obrazca:
Video spletne strani: