home > tutoriale > javascript-ajax > validarea-unui-formular-cu-javascript.php

Validarea unui Formular cu JavaScript

Serie Tut : 1/3

15 Septembrie 2010 de Mihail Alin

In acest tutorial va vom arata o metoda simpla de a valida un formular de contact cu JavaScript.

tutorial javascript
Autor :   Mihail Alin

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 :

  1. Stabilim 2 variabile in care stocam 2 expresii regulare , care le vom folosi pentru a valida campul numelui respectiv campul de e-mail.
  2. 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 ).
  3. 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 :

  1. Daca vizitatorul are JavaScript dezactivat , atunci toata aceasta verificare este egala cu zero.
  2. 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
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria JavaScript & Ajax

  Meniu Slide-Out cu Jquery, Html si CSS   -   Tutorial Jquery pentru incepatori   -   Cum sa centrezi o fereastra/popup   -   Ferestre in Javascript/popups   -   Verificare formular cu JavaScript   -

Tutoriale aleatorii

  Cum sa creezi litere capitale/majuscule cu CSS   -   CSS3 border-radius si -moz-boder-radius   -   Un simplu meniu in CSS si HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Cum sa centrezi o fereastra/popup   -   Afisarea datei cu Javascript   -   Ferestre in Javascript/popups   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

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

Comentarii:

Nume:

Email:

Comentariu:
 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...
 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s
 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.