Validacija formi

Ispitivanje HTML formi

 

U prethodnim zadacima bavili smo se time kako postaviti i uzeti tekstualnu vrednost nekog taga. Za to smo koristili innerHTML.

U formama, gde uglavnom imamo input polja, nas ne interesuje tekst koji se nalazi unutar otvarajuceg I zatvarajuceg taga, vec vrednost koju korisnik unese. Ekvivalent innerHTML komandi kod input polja je – value.

Vazan dogadjaj kod ispitivanja formi je I dogadjaj onsubmit koji se odigrava u momentu kada zelimo da posaljemo formu, u principu to je dugme koje se uglavnom nalazi na samom dnu forme. To je trenutak kada mi zelimo da ispitamo da li su polja popunjena pravilno ili ne I ispisemo poruku o gresci. Pogledacemo jedan jednostavan slucaj forme u kome korisnik treba samo da unese svoju mail adresu. Ovde necemo proveravati ispravnost sintakse vec samo cinjeniu da li je korisnik nesto uneo ili nije.

 

Kompletan kod:

 

<!DOCTYPE html>

<head>

<title>Izmena klase nad elementom putem Java Scripta</title>

</head>

<body>

<h1>Forma</h1>

<form id=”forma” method=”post” action=” procesiraj.php “>

Email adresa: <input id=”mail_adresa” type=”email” name=”mail” >

<p id=”greska” style=”color:red”></p>

<input type=”submit” value=”POSALJI”>

</form>

<script>

window.onload = function(){

document.getElementById(‘forma’).onsubmit = function(){

if(document.getElementById(‘mail_adresa’).value == “”){

document.getElementById(‘greska’).innerHTML = ‘Molimo unesite email adresu';

return false;

}else{

return true;

}

};

}

</script>

</body>

</html>

 

U samom HTML-u nema nista neobicno, forma sa dodeljenim id-jem, koji je dodeljen I input tagu. Jedino sto imamo je prazan p tag sa id-jem greska koji ce biti popunjen u slucaju da korisnik ne unese neku vrednost. Za ostale problem u sintaksi pobrinuce se tip input taga email koji e proveriti bar elementarnu sintaksu. Znaci, hajde da razjasnimo JS kod.

 

U prvom redu definisemo onsubmit dogadjaj koji ce se desiti kada korisnik klikne na element sa id-jem forma, tacnije njeno input polje tipa submit.

 

document.getElementById(‘forma’).onsubmit = function(){

 

Drugi red proverava da li je polje sa id-jem mail_adresa prazno i ako jeste, u p tag unosi poruku o gresci.

if(document.getElementById(‘mail_adresa’).value == “”){

document.getElementById(‘greska’).innerHTML = ‘Molimo unesite email adresu';

return false;

}else{

return true;

}

 

Ono sto je ovde izuzetno bitno su dva reda:

return false;

Ovaj red ustvari ne dozvoljava formi da se posalje serveru, tacnije fajlu procesiraj.php vec vraca formu sa ispisom greske.

 

Nasuprot tome, red koji se izvrsava ukoliko uslov nije ispunjen (polje email je popunjeno):

return true;

znaci da forma nastavi sa cime god je krenula, u ovom slucaju slanje na server podataka koje je korisnik ispunio.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn