API de validare - Validarea elementelor formularului
Validare HTML5
HTML5 suportă validarea nativă a formularelor și a elementelor acestora. Pentru aceasta, câmpurile de intrare folosesc diverse atribute care configurează validarea. În special, putem folosi următoarele atribute:
- required cere ca un câmp de intrare să conțină neapărat o valoare
- max stabilește valoarea numerică maximă (pentru intrarea de date numerice)
- min stabilește valoarea numerică minimă (pentru intrarea de date numerice)
- maxlength stabilește lungimea maximă a unui șir de caractere
- minlength stabilește lungimea minimă a unui șir de caractere
De exemplu, să luăm următoarea pagină:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
input {width: 150px;}
input:invalid {border-color: red; }
input:valid { border-color: green;}
</style>
</head>
<body>
<form id="registerForm" name="registerForm" method="post" action="register">
<p>
<label for="username">Username:</label><br>
<input id="username" name="username" maxlength="20" minlength="3" required>
</p>
<p>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="1" max="110" value="18">
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
</body>
</html>Aici, pe formular este definit un câmp username pentru introducerea unui nume de utilizator condiționat. Acest nume trebuie să aibă cel puțin 3 și cel mult 20 de caractere. Câmpurile pentru introducerea numelui și emailului sunt obligatorii (au atributul required). De asemenea, pentru câmpul age, care este destinat pentru introducerea vârstei condiționate, sunt stabilite valorile minime și maxime admisibile - 1 și 110, respectiv.
De asemenea, merită menționat că prin selectorul input:invalid se poate defini stilul pentru câmpurile nevalide, în timp ce selectorul input:valid stabilește stilul pentru câmpurile care au trecut validarea.
Și dacă introducem în câmp o valoare care nu corespunde atributelor de validare sau nu introducem nicio valoare în câmpurile care necesită introducerea, atunci la încercarea de a trimite formularul, browserul ne va afișa o eroare de validare pentru câmpul respectiv:
Mesajul specific de validare depinde de browserul web. Exemplul de mai sus este pentru Google Chrome. Cu toate acestea, în acest caz, ne interesează cum putem interacționa cu validarea nativă HTML5 în codul JavaScript. În alte browsere, aspectul poate fi diferit.
Obținerea informațiilor despre validare în JavaScript
Browserele moderne permit interacțiunea în codul JavaScript cu mecanismul de validare nativ HTML5. Pentru aceasta este destinat un API special - Constraint Validation API. Acest API definește o serie de proprietăți care pot fi aplicate formularelor sau elementelor formularului și care permit obținerea stării de validare a elementelor:
- willValidate: returnează o valoare booleană care indică dacă validarea este disponibilă pentru elementul formularului. Dacă validarea este disponibilă, atunci se returnează true, în caz contrar se returnează false. De exemplu, dacă pentru un element al formularului este setat atributul disabled, care face acel element inaccesibil pentru interacțiune, atunci validarea pentru el este de asemenea indisponibilă. Pentru alte elemente (care nu sunt elemente ale formularului) se returnează valoarea undefined
- validity: returnează un obiect de tipul ValidityState, care, la rândul său, conține informații despre validarea acestui element al formularului.
Proprietățile ValidityState
- valid: returnează o valoare booleană care indică dacă elementul formularului trece validarea (true) sau nu (false)
- valueMissing: returnează true dacă în elementul formularului, care necesită introducere obligatorie, lipsește valoarea
- typeMismatch: returnează true dacă valoarea introdusă nu corespunde tipului elementului formularului (de exemplu, în elementul <input type="email"> este introdus un text care nu este o adresă de email)
- patternMismatch: returnează true dacă valoarea introdusă nu corespunde modelului specificat
- tooLong: returnează true dacă valoarea introdusă depășește limita maximă admisibilă
- tooShort: returnează true dacă valoarea introdusă este mai mică decât valoarea minimă admisibilă
- rangeUnderflow: returnează true dacă valoarea introdusă este mai mică decât intervalul de valori admisibile
- rangeOverflow: returnează true dacă valoarea introdusă depășește intervalul de valori admisibile
- stepMismatch: returnează true dacă valoarea introdusă nu corespunde valorii atributului step
- badInput: returnează true dacă valoarea introdusă este incorectă
- customError: returnează true dacă la introducere a fost generată o eroare personalizată
validationMessage
validationMessage: conține mesajul de eroare de validare pentru elementul curent al formularului. Mesajul specific depinde de browserul web utilizat.
Să aplicăm unele dintre aceste proprietăți pentru a verifica introducerea într-un element al formularului:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
input {width: 150px;}
input:invalid {border-color: red; }
input:valid { border-color: green;}
</style>
</head>
<body>
<form id="registerForm" name="registerForm" method="post" action="register">
<p>
<label for="email">E-mail:</label><br>
<input type="email" id="email" name="email" required>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const emailField = document.getElementById("email");
emailField.addEventListener("change", validateEmail);
function validateEmail() {
console.log("Poate fi validat:", emailField.willValidate);
console.log("Valoarea lipsește:", emailField.validity.valueMissing);
console.log("Valoarea este validă:", emailField.validity.valid);
console.log("Valoarea corespunde tipului", emailField.validity.typeMismatch);
console.log(emailField.validationMessage);
}
</script>
</body>
</html>Exemplu de funcționare:
Grație acestui lucru putem efectua un proces suplimentar de informații despre validare, de exemplu, putem afișa erorile de validare pe pagină:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
<style>
input {width: 150px;}
input:invalid {border-color: red; }
input:valid { border-color: green;}
#emailErrors {padding:5px;background-color: #ffcccc; color:#b33939; display:none;}
</style>
</head>
<body>
<form id="registerForm" name="registerForm" method="post" action="register">
<p>
<label for="email">E-mail:</label><br>
<input type="email" id="email" name="email" required>
<div id="emailErrors"></div>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const emailField = document.getElementById("email");
const emailErrors = document.getElementById("emailErrors");
emailField.addEventListener("change", validateEmail);
function validateEmail() {
if(!emailField.validity.valid){
emailErrors.textContent = emailField.validationMessage;
emailErrors.style.display = "block";
}
else{
emailErrors.textContent = "";
emailErrors.style.display = "none";
}
}
</script>
</body>
</html>Aici, în cazul existenței unei erori de validare, în blocul emailErrors plasăm mesajul respectiv:
Se observă că browserul determină singur mesajul de eroare. Cu toate acestea, putem verifica validarea conform unor parametri specifici și putem stabili propriile noastre mesaje de eroare:
function validateEmail() {
if(!emailField.validity.valueMissing){
emailErrors.textContent = "Lipsește email-ul!";
emailErrors.style.display = "block";
}
else{
emailErrors.textContent = "";
emailErrors.style.display = "none";
}
}