Cauta rapid aici ↑

Validarea unui formular folosind doar HTML5 si CSS3

Standardul HTML 5 ne permite sa facem validarea unui formular foarte usor si nu permite trimiterea datelor daca un anumit camp din formular nu este completat deloc sau corect. Majoritatea browserelor ce ruleaza pe calculatoare mai performante suporta acest standard. Exista si exceptii si acestea sunt reprezentate de dispozitivele mobile care nu suporta standardul HTML5. Sa presupunem ca browserul nostru suporta acest standard. Pentru a putea realiza validarea unui formular vom avea nevoie doar de cateva atribute.

  • validate
  • required

Atributul validate il vom folosi pe tag-ul form iar atributul required il vom folosi pe orice element din formular care vrem sa fie completat. Aceste atribute sunt de tip booleene si nu necesita nici-o valoare si tocmai de aceea le vom scrie asa cum sunt.

Este foarte important sa folosim in totalitate standardul HTML 5 mai ales daca vrem sa facem validarea unui camp din formular ce va contine o adresa de mail completata cat mai corect. La fel vom proceda si daca vrem sa ne fie transmis un numar de telefon corect scris. Este foarte important sa folosim si atributul general title in care vom scrie ce text vrem sa ii fie afisat utilizatorului. In standardul HTML 5 textul ce este in acest atribut este preluat si afisat de catre browser in aceeasi casuta de dialog ce va apare pentru fiecare camp din formular ce necesita a fi validat.

Standardul CSS3 ne ofera si doua pseudo-clase de care ne vom ajuta pentru a face validarea in timp ce utilizatorul completeaza campurile din formular. In acest mod putem sa ii atribuim diferite stiluri campurilor din formular in timp real. Cele doua pseudo-clase sunt:

  • :valid
  • :invalid

La sfarsit vom creea un camp de input de tip text (obligatoriu) pe care vom folosi atributul pattern si caruia ii vom da o valoare numerica pe care ne-o dorim. In acest mod ii putem spune utilizatorului sa introduca rezultatul unei operatii matematice si daca nu este introdus rezultatul pe care ni-l dorim in acest camp, browserul nu va permite validarea datelor.

In exemplul de mai jos am folosit o combinatie de HTML 5 + CSS3. Va las pe voi intelegeti exact ce am facut.