Cauta rapid aici ↑

Validarea unui formular cu JavaScript

Validarea unui formular fie ca i-a forma unui camp de login sau formular de contact ori altceva, campurile formularului sunt aceleasi si cu JavaScript putem face o validare personalizata, spre deosebire de validarea doar cu HTML 5 si CSS3.

Pentru a putea realiza validarea unui formular va trebui mai intai sa dezactivam doua lucruri pe care browser-ul le face. Primul este sa nu valideze formularul, iar browserele cu versiuni recente tocmai asta fac si pentru asta va trebui sa folosim atributul true novalidate pe tag-ul form. Al doilea lucru pe care trebuie sa il facem este sa folosim metoda preventDefault() pentru a dezactiva butonul de submit si care va fi activat in momentul cand validarea este facuta asupra tuturor elementelor formularului. Metoda preventDefault() o vom lega de singurul atribut al functiei ce va face validarea.

In momentul cand proiectam un formular trebuie sa ne gandim la traseul pe care il va parcurge utilizatorul si va trebui sa ii afisam anumite zone, campuri in care vor fi afisate erorile in cazul in care utilizatorul nu completeaza un camp asa cum ne dorim. Indiferent de ce am face, utilizatorul va putea completa un camp sau toate campurile formularului dupa bunul plac cu date ce permit validarea dar nu sunt date corecte despre acesta.

In exemplul urmator va voi arata cum se face validarea pentru un formular simplu ce va contine 4 campuri plus butonul de submit. Campurile sau mai bine zis input-urile sunt de tip text, number si email plus o zona de text reprezentat de tag-ul pereche textarea.

Pentru a face validarea campurilor vom avea nevoie de o functie ce va rula in momentul cand este apasat butonul de sumbit si care va contine mai multe conditii if, else if si else.

Pentru a valida primul camp, cel de text, va trebui sa il selectam, la fel si celelante si sa extragem valoarea pe care acesta o are in momentul cand functia ruleaza declansata de evenimentul submit. Primul lucru pe care il vom verifica este daca acesta este gol sau nu are un minim de n caractere.

Urmatorul camp este un input de tip number si cu acesta vom prelua numarul de telefon. Pentru a valida acest camp vom proceda la fel ca in cazul campului anterior cu mentiunea ca acest camp va avea continut ceva mai lung, exact cat reprezinta un numar de telefon pe mobil sau alte tipuri de numere de telefon.

Al treilea input este de tip email si acesta va stoca o adresa de email. Pentru a face validarea acestui camp va trebui sa ne gandim la lungimea minima a unei adrese de email si la caractere @ si punct ( . ) prezente intr-o adresa de email corecta. Pentru a verifica prezenta acestor caractere in valoarea acestui input va trebui sa folosim metodele indexOf() si lastIndexOf(). Ambele verifica prezenta caracterului din interiorul parantezelor prezentat intre ghilimelele simple sau duble. Diferenta este ca prima metoda verifica de la inceputul string-ului iar a doua metoda verifica de la sfarsitul string-ului.

In cele din urma am ajuns la zona de text din formular reprezentat de tag-ul pereche textarea. Pentru a face validarea acestui camp va trebui sa procedam exact ca la input-ul de tip text, primul element din formular.

La sfarsit nu va trebui decat sa lasam functia noastra sa returneze true si butonul de submit va fi activat si toate datele vor fi trimise care un script de pe server unde va fi inca odata verificat si asta pentru ca validarea trebuie sa fie facuta si pe partea de server. Uitati exemplul in actiune cu tot cu limbajele HTML, CSS si JavaScript.

IMPORTANT

Observati maniera in care este construit intreg fisierul si folosirea intr-un mod profesionist a clasei CSS dn si binenteles a classList API despre care va invit (in cazul in care nu ati auzit) sa o vedeti in acest tutorial. classList API

Intreg codul pentru exemplul de mai sus.