Validarea unui formular (form)

Exemplu:

Nume: Numele trebuie completat.
Numele trebuie sa contina doar litere.

Parola: Parola trebuie completata.
Parola minim 6 caractere.

Validare email: Valideaza o adresa de email.

---

Cuprins:

Validari:
 1. Validare input field - continut gol
 2. Validare input field - numar minim de caractere
 3. Validare input field - caractere invalide
 4. Validare input field - continut alphabet
 5. Validare input field - continut numeric
 6. Validare input field - limita de varsta
 7. Validare input field - adresa email
Notificari:
 1. Notificare prin dialog
 2. Dezactivare buton de trimitere
 3. Schimbare CSS

Continut:

Validari

1. Validare input field - continut gol

Continut gol: Campul trebuie completat.

Cod javascript:

function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputGol verifica daca exista continut in text input si actualizeaza icoana de status. Primeste ca parametru un input de tipul text.
Functia isCampGol verifica daca valoarea primita este de tipul null sau este un string vid. Primeste ca parametru valoarea unui input.
Functia actualizeazaIcoanaStatus va actualiza icoana de status. Primeste ca parametri rezultatul validarii si componenta parinte. In functie de rezultatul validarii icoana va fi verde (pentru true) sau un semn de exclamare (respectiv false). Componenta parinte va avea atributa clasa care introduce icoana si este de tipul div. Aceasta va gazdui icoana de status.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
 <div>
  <label>Continut gol:</label> 
  <input name="fNume" onkeyup="validareInputGol(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Campul trebuie completat.</span>
  </span>
 </div>
</form>

Explicatii:

In exemplul de mai sus avem un formular cu un input text. Acest input este incapsulat intr-un div pentru a desparti continutul acestuia fata de restul componentelor. Inputul este acompaniat de un label si un span.
Label-ul este folosit pentru denumirea inputului aferent.
Span-ul este folosit pentru gazduirea icoanei de ajutor, care are atasata un tooltip.
De asemenea div-ul mai este folosit pentru a afisa icoana de status cand utilizatorul tasteaza o valoare in input. Pentru a actualiza icoana, functia validareInputGol este atasata evenimentului onkeyup, care are loc de fiecare data cand utilizatorul tasteaza (ridica degetul de pe tasta) o valoare in input.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

2. Validare input field - numar minim de caractere

Validare lungime: Campul are nevoie de minim 5 caractere.

Cod javascript:

function validareInputNrMinim(input) {
    var parentX = input.parentNode,
        validare = validareLungime(input.value, 5);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function validareLungime(x, lungime) {
    return x.length >= lungime;
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputNrMinim verifica daca exista cel putin 5 caractere in input si actualizeaza icoana de status. Primeste un input de tipul text.
Functia validareLungime verifica daca lungimea valorii primite este mai mare sau egala cu cea primita ca parametru. Primeste ca parametri valoarea inputului si lungimea minima.
Functia actualizeazaIcoanaStatus modifica atributul class al componentei parinte. Primeste ca parametrii rezultatul validarii si componenta in care se afla inputului validat. In functie de clasa setata se va afisa icoana corespunzatoare: "checked" icoana verde de confirmare si "warning" icona galbena de atentionare.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
 <div>
  <label>Validare lungime:</label> 
  <input name="fNume" onkeyup="validareInputNrMinim(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Campul are nevoie de minim 5 caractere.</span>
  </span>
 </div>
</form>

Explicatii:

In codul HTML de mai sus este definit un formular ce contine un input text.
Pentru validarea inputului este folosita functia validareInputNrMinim, care este apelata de fiecare data cand o tasta este apasata. Pentru afisarea icoanei de ajutor este folosit tagul span, care contine imaginea si descrierea acesteia. Cu ajutorul CSS un tooltip va fi afisat cand mouse-ul se duce deasupra icoanei.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

3. Validare input field - caractere invalide

Validare caracter: Caracterele '.' , ',' si ':' nu sunt permise.

Cod javascript:

function validareInputCaracterInvalid(input) {
    var parentX = input.parentNode,
        validare = !isCaractere(input.value, ",.:");
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function validareInputCaracterInvalid(input) {
    var parentX = input.parentNode,
        validare = !isCaractere(input.value, ",.:");
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCaractere(x, caractere) {
    return new RegExp("[" + caractere + "]").test(x);
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputCaracterInvalid verifica daca exista caractere invalide introduse in input si actualizeaza icoana de status. Lista de caractere invalide este trimisa ca string functiei isCaractere pentru a verifica daca acestea sunt incluse in text.
Functia isCaractere verifica daca valoarea primita contine caracterele date ca parametru. Verificarea se face cu ajutorul expresiilor regulare. In cazul nostru expresia regulara este definita prin "RegExp". Constructorului ii este atribuit un pattern care contine sirul de caractere. Functia test verifica daca ppaternul se potriveste textului dat ca parametru.
Functia actualizeazaIcoanaStatus modifica clasa parintelui pentru a afisa icoana corenspunzatoare rezultatului validarii. Icoana este generata cu ajutorul CSS.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
 <div>
  <label>Validare caracter:</label> 
  <input name="fNume" onkeyup="validareInputCaracterInvalid(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Caracterele '.' , ',' si ':' nu sunt permise.</span>
  </span>
 </div>
</form>

Explicatii :

Formularul de mai sus contine inputul, labelul acestuia si icoana de ajutor.
La input este atasata functia validareInputCaracterInvalid care se va apela de fiecare data cans se tasteaza un caracter.
Icoana de ajutor are un tooltip customizat cu ajutorul CSS.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

4. Validare input field - continut alphabet

Validare alfabet: Campul permite doar litere.

Cod javascript:

function validareInputAlfabet(input) {
    var parentX = input.parentNode,
        validare = isCaracterAlfabet(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCaracterAlfabet(x) {
    return x.match(/^[A-Za-z]+$/);
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputAlphabet verifica daca in inputul tinta sunt introduse doar caractere ce apartin alfabetului si actualizeaza icoana de status dupa caz.
Functia isCaracterAlfabet verifica daca stringul dat ca input contine doar caractere ce apartin alfabetului. Validarea se face cu regex.
Grupul de caractere valide se defineste cu ajutorul parantezelor patrate "[" si "]". In interiorul acestora se pun caracterele dorite. Pentru a enumera un sir de caractere se foloseste cratima "-". Definirea literelor din alfabet se face prin "A-Za-z" (include si majuscule) si se introduce in paranteze patrate pentru a putea face patternul. Daca s-ar folosi doar "[A-Za-z]" comparatia ar returna adevarat pentru cazul in care exista cel putin o litera.
Pentru a cuprinde tot cuvantul se introduce "^" (returneaza adevarat pentru cazul in care caracterul se afla la inceputul cuvantului) si "$" (returneaza adevarat pentru cazul in care caracterul se afla sfarsitul cauvatului). Daca am pastra "^[A-Za-z]$", atunci validarea ar returna adevarat doar in cazul in care string-ul ar fi compus doar dintr-o litera. Pentru a rezolva problema lungimii, s-a folosit "+". Cu ajutorul acestuia expresia returneaza adevarat daca exista cel putin un singur caracter dintre cele valide.
Functia actualizeazaIcoanaStatus va schimba clasa componentei date ca parametru in functie de parametrul validare. Cu ajutorul clasei CSS definit va afisa una dintre icoanele de status.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
 <div>
  <label>Validare alfabet:</label> 
  <input name="fNume" onkeyup="validareInputAlfabet(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Campul permite doar litere.</span>
  </span>
 </div>
</form>

Explicatii:

Formularul de mai sus contine un input, labelul lui si icoana de ajutor.
Inputul are atasat listenerul onkeyup, care va apela functia validareInputAlfabet. Aceasta functie va face validarea continutului din input. In functie de rezultatul verificarii se va schimba clasa componentei parinte. Cu ajutorul clasei se va adauga icoana de status. Icoana de status se actualiza de fiecare data cand se introduce un caracter cu ajutorul tastaturii.
Icoana de ajutor are un tooltip care mentioneaza conditiile validarii. Tooltipul este realizat cu ajutorul CSS.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

5. Validare input field - continut numeric

Validare numere: Campul permite doar numere.

Cod javascript:

function validareInputCifra(input) {
    var parentX = input.parentNode,
        validare = isCifra(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCifra(x) {
    return (x.match(/^\d+(?:\.\d+)?$/));
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Explicatii:

Functia validareInputCifra verifica daca stringul introdus este numar si actualizeaza icoana de status ca atare.
Functia isCifra valideaza stringul dat ca input cu ajutorul expresiilor regex.
^ reprezinta inceput de linie, expresia pe care o cauta trebuie sa inceapa cu prima litera din string
\d+ se potriveste pentru una sau mai multe cifre
(?: este folosit pentru delimitarea unui grup (marcheaza inceptul)
)? este folosit pentru delimitarea unui grup (marcheaza sfarsitul)
$ reprezinta sfarsitul de linie sau sfarsitul stringului, expresia trebuie sa se termine cu linia "\n" sau la sfarsitul stringului
Functia actualizeazaIcoanaStatus schimba clasa componentei data ca parametru. Daca parametrul validare este adevarat, clasa care corespundei icoane de confirmare va fi aplicata. Altfel va fi aplicata clasa ce va afisata icoana de atentionare.

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
 <div>
  <label>Validare numere:</label> 
  <input name="fNume" onkeyup="validareInputCifra(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Campul permite doar cifre.</span>
  </span>
 </div>
</form>

Explicatii:

In formularul de mai sus se vafe validarea unui numar.
Pe inputul text este atasata functia validareInputCifra, care va fi apelata de fiecara data cand se tasteaza un caracter. Prin aceasta se va face atualizarea icoanei de status.
Prin intermediul CSS icoana de ajutor are adaugat un tooltip.

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

6. Validare input field - limita de varsta

Validare varsta: Permite varsta de peste 18 si sub 100.

Cod javascript:

function validareInputVarsta(input) {
    var parentX = input.parentNode,
        validare = isCifra(input.value) 
        && isInInterval(input.value, 18, 100);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCifra(x) {
    return (x.match(/^\d+(?:\.\d+)?$/));
}

function isInInterval(x, minim, maxim) {
    return x >= minim && x <= maxim;
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
 <div>
  <label>Validare varsta:</label> 
  <input name="fNume" onkeyup="validareInputVarsta(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Permite varsta de peste 18 si sub 100.</span>
  </span>
  </div>
</form>

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

7. Validare input field - adresa email

Validare email: Valideaza o adresa de email.

Cod javascript:

function validareInputEmail(input) {
    var parentX = input.parentNode,
     validare = isEmail(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
 return validare;
}

function isEmail(x) {
    var pozAt = x.indexOf("@"),
        pozPunct = x.lastIndexOf(".");
    return !(pozAt < 1 || pozPunct < pozAt + 2
    || pozPunct + 2 >= x.length);
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Cod HTML:

<form action="#" class="formular" method="post" name="formular">
 <div>
  <label>Validare email:</label> 
  <input name="fNume" onkeyup="validareInputEmail(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Valideaza o adresa de email.</span>
  </span>
 </div>
</form>

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

Notificari

1. Notificare prin dialog

Continut gol: Campul trebuie completat.

---

Cod javascript:

function validareFormularDialog() {
    var x = document.forms.formularDialog.fNume.value,
        parentX = document.forms.formularDialog.fNume.parentNode,
        validare = !isCampGol(x);
    actualizeazaIcoanaStatus(validare, parentX);
    if (!validare) {
        window.alert("Campul este gol.");
    }
    return validare;
}

function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Cod HTML:

<form action="#" class="formular" method="get" name="formularDialog" onsubmit="return validareFormularDialog()">
 <div>
  <label>Continut gol:</label>
  <input name="fNume" onkeyup="validareInputGol(this)" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Campul trebuie completat.</span>
  </span>
 </div>
 <hr />
 <input class="posteaza" type="submit" value="Notificare prind dialog" />
</form>

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

2. Dezactivare buton de trimitere

Continut gol: Campul trebuie completat.

---

Cod javascript:

function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaButton(idButon, valid) {
    document.getElementById(idButon).disabled = valid ? "" : "disabled";
}

Cod HTML:

<form action="#" class="formular" method="get" name="formularActiveaza">
 <div>
  <label>Continut gol:</label>
  <input name="fNume" onkeyup="actualizeazaButton('submitActiveaza',validareInputGol(this))" type="text" />
  <span class="tooltip"> 
   <img src="resources/help.png" />
   <span>Campul trebuie completat.</span>
  </span>
 </div>
 <hr />
 <input class="posteaza" disabled="true" id="submitActiveaza" type="submit" value="Notificare prin dezactivare buton" />
</form>

Codul CSS este disponibil la sectiunea: Notificare prin Schimbare CSS.

3. Schimbare CSS

Continut gol: Campul trebuie completat.

Cod javascript:

function validareInputGol(input) {
    var parentX = input.parentNode,
        validare = !isCampGol(input.value);
    actualizeazaIcoanaStatus(validare, parentX);
    return validare;
}

function isCampGol(x) {
    return x === null || x === "";
}

function actualizeazaIcoanaStatus(validare, componenta) {
    if (validare) {
        componenta.setAttribute("class", "checked");
    } else {
        componenta.setAttribute("class", "warning");
    }
}

Cod HTML:

<form action="#" class="formular" method="get">
 <div>
  <label>Continut gol:</label> 
   <input name="fNume" onkeyup="validareInputGol(this)" type="text" />
   <span class="tooltip"> 
    <img src="resources/help.png" />
    <span>Campul trebuie completat.</span>
   </span>
  </div>
</form>

Cod CSS:

.formular {
width:310px;
border:#999 medium solid;
border-radius:10px;
margin:5px;
padding:5px;
}

.formular label {
display:inline-block;
width:120px;
}

.formular input {
margin-bottom:5px;
}

.warning {
background-image:url(resources/alert.png);
background-repeat:no-repeat;
background-size:20px 20px;
background-position:top right;
}

.checked {
background-image:url(resources/check.png);
background-repeat:no-repeat;
background-size:20px 20px;
background-position:top right;
}

.tooltip img {
width:20px;
height: 20px;
vertical-align:middle;
}

span.tooltip span { 
z-index:10;
display:none; 
padding:14px 20px; 
margin-top:-2px; 
margin-left:5px;
line-height:16px;
}

span.tooltip:hover span{
display:inline; 
position:absolute; 
color:#111; 
border:2px solid #DCA; 
background:#fffAF0;
}

span.tooltip span { 
border-radius:7px; 
-moz-border-radius: 4px;
-webkit-border-radius: 4px; 
-moz-box-shadow: 5px 5px 8px #CCC; 
-webkit-box-shadow: 5px 5px 8px #CCC; 
box-shadow: 5px 5px 8px #CCC;
}

Nota explicativa:

Functia validareInputGol verifica daca este introdusa o valoare in input. Aceasta primeste ca parametru un input text din care va extrage valoarea. Daca valoarea este valida va returna true si icoana de notificare se va actualiza. Functia are un return pentru a putea fi folosita si in combinatie cu evenimentul "onsubmit". In exemplul de mai sus functia este atasata evenimentului "onkeyup", asta inseamna ca de fiecare data cand este introdusa o valoare prin intermediul tastaturii se va realiza validarea si icoana de notificare se va actualiza. Pentru a realiza validarea se foloseste functia isCampGol. Aceasta primeste ca parametru valoarea inputului si o compara cu null si cu "". Pentru actualizarea icoanei de notificare se foloseste functia actualizeazaIcoanaStatus. Aceasta primeste ca parametru rezultatul validarii si parintele componentei validate. Clasa folosita pentru a defini stilul componentei este schimbata in functie de rezultatul validarii. In functie de stilul setat va fi afisata o icoana de atentionare sau una de confirmare a validarii.