home > tutoriale > javascript-ajax > validarea-unui-formular-cu-javascript.php
Validarea unui Formular cu JavaScript
Serie Tut : 1/3
15 Septembrie 2010 de Mihail AlinIn acest tutorial va vom arata o metoda simpla de a valida un formular de contact cu JavaScript.
Primul Pas - Crearea formului
Ok , sa zicem ca am dori sa facem un formular similar ca cel de pe pagina noastra de contact .
Deci o sa avem un camp pentru Nume , unul pentru E-mail si unul pentru ca userii sa ne trimita un Mesaj.
Intotdeauna mi-a placut ordinea asa ca eu unul recomand sa facem un fisier separat unde vom scrie validarea formularului in JavaScript.
Haideti sa facem pagina contact.html de exemplu, care sa contina formularul de contact :
<html>
<head>
<!-- Tutorial distribuit de rotuts.com . Tutoriale web-design , programare si multe altele la rotuts.com -->
<title>Form Validation cu JavaScript</title>
<!-- adaugam pagina javascript pe pagina cu formularul -->
<script type="text/javascript" src="validareform.js"></script>
</head>
<body>
<!-- Adaugam tag-ului de Form eventul onsubmit , care va intoarce rezultatul validarii(in cazul nostru) : -->
<!-- TRUE - trece sau FALSE - nu trece ( ca sa spunem asa )-->
<form action="" enctype="multipart/form-data" name="form" onsubmit="return ValidareForm(this);">
<label>Name <br />
<input type="text" name="nume" />
</label><br />
<label>E-mail <br />
<input type="text" name="email" />
</label><br />
<label>Mesaj <br />
<textarea name="mesaj" cols="100"></textarea>
<label><br /><br />
<input type="submit" name="submit" />
</form>
</body>
</html>
Dupa cum puteti vedea am asociat fiecare camp cu un nume , acel nume ne va fi folositor mai tarziu pentru a accesa acel camp.
Pasul 2 - Incepem sa lucram cu JavaScript
Acum trebuie sa scriem codul necesar pentru a valida formulariul .Retineti , acest cod il vom scrie pe pagina validareform.js.
//Script Distribuit de rotuts.com . Tutoriale web-design , programare si multe altele la www.rotuts.com
//JavaScript Document
//vom folosi doua expresii regulare pentru a valida campul numelui si campul de e-mail
var filtrare_nume = /^[A-Za-z0-9 ]{3,20}$/;
var filtrare_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
//facem functia de validare
function ValidareForm(form)
{
//tragem valorile fiecarui camp si le stocam in variabile
var nume = form.nume.value;
var email = form.email.value;
var mesaj = form.mesaj.value;
//facem un array numit erori pentru a stoca erorile care se produc
var erori = [];
//daca numele introdus nu se potriveste cu expresia atunci ...
if (!filtrare_nume.test(nume))
{
//Adaugam in array-ul erori , eroarea "Numele nu este valid"
erori[erori.length] = "Numele nu este valid";
}
//daca e-mail-ul introdus nu se potriveste cu expresia atunci ...
if (!filtrare_email.test(email))
{
erori[erori.length] = "Trebuie sa introduci o adresa de e-mail valida";
}
//daca campul mesajului este gol atunci ....
if (mesaj == "")
{
erori[erori.length] = "Trebuie sa ne scrieti un mesaj";
}
//Daca "marimea" array-ului erori este mai mare de 0 atunci ...
if (erori.length > 0)
{
//chemam functia raportErori si ii trecem ca parametru array-ul
raportErori(erori);
//deasemenea evaluam toata functia ca fiind falsa
return false;
}
//daca marimea array-ului NU este mai mare decat 0 atunci ...
return true ;
}
//facem functia raportErori
function raportErori(erori)
{
var atentiune = "Ceva ati gresit ...";
for(var i = 0; i<erori.length; i++)
{
var numarErori= i + 1;
atentiune += "\n" + numarErori + ". " + erori[i];
}
alert(atentiune);
}
Mai pe scurt , facem scriptul cu urmatorii pasi :
- Stabilim 2 variabile in care stocam 2 expresii regulare , care le vom folosi pentru a valida campul numelui respectiv campul de e-mail.
- Facem o functie numita ValidareForm si ii trecem ca paramentru formularul insusi care are numele (form) deci : ValidareForm(form).In aceasta functie :
- Tragem valorile celor 3 campuri : Nume , e-mail si Mesaj
- Facem un array numit erori in care stocam erorile care le face usuariul .
- Daca numele introdus de vizitator nu corespunde cu modelul expresiei atunci stocam valuarea erorii in array-ul erori.Acelasi procedeu folosim pentru campurile email si mesaj.
- Dupa ce am verificat campurile , verificam daca valuarea array-ului erori este 0 , daca nu este atunci executam functia raportErori si ii dam ca paramentru array-ul insusi si evaluam functia ca fiind Falsa . Daca array-ul este 0 atunci evaluam functia ca fiind Adevarata ( nu s-au gasit erori ).
- Functia raportErori(erori), aceasta functie se declanseaza decat in cazul in care verificarea array-ului rezulta ca valuarea acestuia este mai mare decat 0 :
- Stocam in variabila atentiune valuare "Ceva ati gresit..."
- Executam un for loop de un numar de ori determinat , in cazul nostru pana cand variabila i care este egala cu 0 ajunge sa fie mai mica decat numarul de erori stocate in array-ul erori si incrementam variabila i cu 1 .
O sugestie
Desi verificarea formularelor cu JavaScript este foarte folositoare pentru vizitatori cat si ca o masura de securitate aditionala se RECOMANDA sa faceti verificarea si server-side cu un limbaj precum PHP , deoarece :
- Daca vizitatorul are JavaScript dezactivat , atunci toata aceasta verificare este egala cu zero.
- JavaScript este un limbaj de programare Client-Side , deci poate fi manipulat.
Citeste in continuare urmatoarea parte din aceasta serie Serie Tut : 2/3 Verificare Formular cu PhP.
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta