Validarea formularelor
Deci, avem la dispoziție diferite elemente pe care le putem folosi într-un formular. Putem introduce în ele diferite valori. Cu toate acestea, adesea utilizatorii introduc valori incorecte: de exemplu, se așteaptă la introducerea de numere, iar utilizatorul introduce litere, etc. Și pentru prevenirea și verificarea introducerii incorecte în HTML5 există un mecanism de validare.
Avantajul utilizării validării în HTML5 constă în faptul că utilizatorul, după o introducere incorectă, poate primi imediat un mesaj de eroare și poate face modificările necesare datelor introduse.
Pentru crearea validării în elementele formei HTML5 se utilizează o serie de atribute:
- required: necesită introducerea obligatorie a unei valori. Pentru elementele textarea, select, input (cu tipul text, password, checkbox, radio, file, datetime-local, date, month, time, week, number, email, url, search, tel)
- min și max: valorile minimă și maximă admisibile. Pentru elementul input cu tipul datetime-local, date, month, time, week, number, range
- pattern: stabilește un șablon căruia trebuie să-i corespundă datele introduse
Atributul required necesită prezența obligatorie a unei valori:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Validarea în HTML5</title>
</head>
<body>
<form method="get">
<p>
<label for="login">Login:</label>
<input type="text" required id="login" name="login" />
</p>
<p>
<label for="password">Parola:</label>
<input type="password" required id="password" name="password" />
</p>
<p>
<input type="submit" value="Trimite" />
</p>
</form>
</body>
</html>Dacă nu introducem niciun fel de date în aceste câmpuri, lăsându-le goale, și apăsăm pe butonul de trimitere, browserul ne va afișa mesaje de eroare, iar datele nu vor fi trimise pe server:
În funcție de browser, vizualizarea mesajului poate varia ușor. De asemenea, marginile câmpului de introducere incorect pot fi colorate în roșu.
Atributele max și min
Pentru a limita intervalul de valori introduse se folosesc atributele max și min:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Validarea în HTML5</title>
</head>
<body>
<form method="get">
<p>
<label for="age">Vârstă:</label>
<input type="number" min="1" max="100" value="18" id="age" name="age"/>
</p>
<p>
<input type="submit" value="Trimite" />
</p>
</form>
</body>
</html>
Atributul pattern
Atributul pattern stabilește un șablon pe care trebuie să-l respecte datele. Pentru definirea șablonului se folosește limbajul așa-numitelor expresii regulate. Să examinăm cele mai simple exemple:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Validarea în HTML5</title>
</head>
<body>
<form method="get">
<p>
<label for="phone">Telefon:</label>
<input type="text" placeholder="+1-234-567-8901"
pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone" name="phone" />
</p>
<p>
<input type="submit" value="Trimite" />
</p>
</form>
</body>
</html>Aici, pentru introducerea numărului de telefon se folosește expresia regulată \+\d-\d{3}-\d{3}-\d{4}. Aceasta înseamnă că primul element în număr trebuie să fie semnul plus +. Expresia \d reprezintă orice cifră de la 0 la 9.
Expresia \d{3} înseamnă trei cifre consecutive, iar \d{4} - patru cifre consecutive. Adică, acest șablon va corespunde unui număr de telefon în formatul "+1-234-567-8901".
Dacă introducem date care nu corespund acestui șablon și apăsăm pe trimitere, browserul va afișa o eroare:
Dezactivarea validării
Nu întotdeauna validarea este dorită, uneori este necesar să o dezactivăm. Și în acest caz, putem folosi fie atributul novalidate al formularului, fie atributul formnovalidate al butonului de trimitere:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Validarea în HTML5</title>
</head>
<body>
<form novalidate method="get">
<p>
<label for="phone">Telefon:</label>
<input type="text" placeholder="+1-234-567-8901"
pattern="\+\d-\d{3}-\d{3}-\d{4}" id="phone" name="phone" />
</p>
<p>
<input type="submit" value="Trimite" formnovalidate />
</p>
</form>
</body>
</html>