Kështu mund të kontrollohet me JavaScript se a janë mbushur të gjitha fushat para se të dërgohet formulari tek serveri.
Shkruaj së pari kodin e fushave të formularit dhe caktoja formularit një emër. Bëre të njëjtën për fushat e formularit.
Në këtë demonstrim e kam quajtur unë formularin formaDemonstuese dhe i kam përdorur dy fusha me emrat fushaEmri dhe fushaMbiemri. Ke kujdes me germa, ato kanë dallim se a është germë e madhe apo e vogël. Për shembull fushaEmri, FushaEmri, Fushaemri dhe fushaaemri janë katër emra të ndryshëm të fushave sa i përket JavaScript-it. Funksionin në JavaScript ende nuk e kemi krijuar, por kur e krijojmë do ta quajmë kontolloFormularin()
<form name="formaDemonstuese" method="" action="" onSubmit="return kontolloFormularin();">
Emri: <input name="fushaEmri" type="text">
Mbiemri: <input name="fushaMbiemri" type="text">
<input type="submit" name="submit" value="dërgo">
</form>
Krijo tani funksionin dhe vendose në krye të faqes ose me lidhje me skedar të jashtëm. Skedari i jashtëm duhet të ketë prapashtesën .js dhe lidhja bëhet kështu:
<script type="text/javascript" src="emri_i_skedarit_te_jashtem.js"></script>
Këtu tregohet përdorimi në të njëjtën faqe ku është formulari. Sa i përket skriptit nuk ka dallim se a është në faqe apo me lidhje jashtë, por nëse skripti përdoret në disa faqe të ndryshme më praktike është që të jetë i jashtëm. Kështu kur ndryshohet skripti i jashtëm nuk ka nevojë që të ndryshohen faqet tjera në sajt të lidhura me këtë skript. Këtë e kemi treguar edhe tek mësimi i stileve.
Nëse e vendos funksionin në skedar të jashtëm, mos e përdor aty vetëm kodin me ngjyrë të zbehur (rendi i parë dhe i fundit).
Vendose funksionin e krijuar në mes të etiketave <head> ... </head> kështu
<script type="text/javascript">
function kontolloFormularin() {
if (document.formaDemonstuese.fushaEmri.value == "")
{
alert('Nuk e keni plot\u00ebsuar emrin! \nKjo \u00ebsht\u00eb e obliguar!');
return false;
}
else if (document.formaDemonstuese.fushaMbiemri.value == "")
{
alert('Nuk e keni plot\u00ebsuar mbiemrin! \nKjo \u00ebsht\u00eb e obliguar!');
return false;
}
return true;
}
</script>
function kontrolloFushat()
Këtu e kemi krijuar një funksion të ri dhe e kemi quajtur kontrolloFushat. Ky kujdeset për kontrollimin (kthimin) e funksionit kur përdoruesi klikon në pullën për dërgim (onSubmit="return kontolloFormularin();")
Kontrollimi i fushave bëhet kështu në këtë demonstrim
if (document.formaDemonstuese.fushaEmri.value == "")
alert('Fusha e emrit \u00esht\u00e e zbraz\u00et');
return false;
E udhëzojmë JavaSciptin (i cili është i instaluar tek çdo shfletues i uebit) se nëse në këtë dokument të uebit, formulari me emrin formaEmri, dhe fusha e tij me emrin fushaEmri është e zbrazët (== njësoj sikur përmbajtja brenda këtyre thonjëzave), trego lajmërimin (tekstin e shkruar) në mes thonjëzave dhe kthe përgjigje të rremë/jo të vërtetë (return false;).
Nëse e shikoni tekstin e vëreni se teksti në mes thonjëzave ka një simbol me shënimin \u00e. Ky është kod për germën ë. Fjala e shënuar me \u00esht\u00e tregohet "është". Kodi tjetër të cilin e shihni aty \n përdoret për rend të ri (new).
Pastaj e bëjmë të njëjtën për formularin që vijon. Këtu mund të vendosim edhe fushat tjera të formularit.
else if (document.formaDemonstuese.fushaMbiemri.value == "")
alert('Fusha e mbiemrit \u00esht\u00e e zbraz\u00et');
return false;
Nëse të gjitha fushat janë nuk janë të zbrazëta atëherë kthe përgjigje pozitive/të vërtetë dhe dërgo skriptin tek serveri.
return true;
}
Shiko kodin e plotë tek shembujt me JavaScript