home > tutoriale > javascript-ajax > validarea-unui-formular-cu-javascript.php
In acest tutorial va vom arata o metoda simpla de a valida un formular de contact cu JavaScript.
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.
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 :
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 :
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
Comenturi
1 comenturi pana acum... (posteaza si tu)Merci mult de tot, life saver
Postat de Mircea pe data de: Tuesday, 10.12.10 @ 23:05pm