Controlul validării formularelor
Metode de validare
În tema anterioară am văzut cum se poate obține starea folosind proprietățile Constraint Validation API. Dar, în plus față de proprietăți, Constraint Validation API oferă o serie de metode care permit controlul validării:
- checkValidity(): verifică dacă elementul formularului sau întregul formular trece validarea. Această metodă poate fi apelată atât pentru formular în ansamblu, cât și pentru elementele sale individuale. Un element al formularului este valid dacă respectă toate atributele de validare. Un formular este valid dacă toate elementele sale trec validarea. Dacă formularul sau elementele sale trec validarea, atunci se returnează true, altfel se returnează false
- reportValidity(): de asemenea, verifică dacă elementul formularului sau întregul formular trece validarea. Cu toate acestea, spre deosebire de checkValidity(), această metodă afișează și erorile de validare. Această metodă poate fi, de asemenea, apelată atât pentru formular în ansamblu, cât și pentru elementele sale individuale
- setCustomValidity(): această metodă permite configurarea mesajelor de validare
De exemplu, verificarea validității formularului și a elementelor sale folosind checkValidity():
<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="age">Age:</label><br>
<input type="number" id="age" name="age" min="1" max="110" required>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const registerForm = document.registerForm;
const submit = registerForm.submit;
submit.addEventListener("click", validate);
function validate(){
if(!registerForm.username.checkValidity()){
console.log("Username is not valid");
}
if(!registerForm.age.checkValidity()){
console.log("Age is not valid");
}
if(!registerForm.checkValidity()){
console.log("Form data is not valid");
}
}
</script>Pentru elemente, apelarea acestei metode este analogă verificării validității folosind proprietatea validity.valid:
function validate(){
if(!registerForm.username.validity.valid){
console.log("Username is not valid");
}
if(!registerForm.age.validity.valid){
console.log("Age is not valid");
}
if(!registerForm.checkValidity()){
console.log("Form data is not valid");
}
}Configurarea propriilor mesaje de validare
Pentru configurarea propriilor mesaje de validare, în metoda setCustomValidity() se transmite mesajul necesar:
<form id="registerForm" name="registerForm">
<p>
<label for="username">Username:</label><br>
<input id="username" name="username" maxlength="20" minlength="3" required>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const registerForm = document.registerForm;
const submit = registerForm.submit;
submit.addEventListener("click", validate);
function validate(){
if(registerForm.username.validity.valueMissing){
registerForm.username.setCustomValidity("Este necesar să introduceți un nume de utilizator");
}
if(registerForm.username.validity.tooLong){
registerForm.username.setCustomValidity("Numele de utilizator nu trebuie să depășească 20 de caractere");
}
if(registerForm.username.validity.tooShort){
registerForm.username.setCustomValidity("Numele de utilizator nu trebuie să fie mai scurt de 3 caractere");
}
}
</script>Aici, la trimiterea formularului, verificăm valoarea câmpului username. În funcție de regula de validare nerespectată, stabilim mesajul de eroare corespunzător. Și browserul va folosi de asemenea aceste mesaje.
Definirea propriilor reguli de validare
La validare nu suntem limitați la regulile de validare încorporate, care sunt aplicate elementului formularului prin atributele required, minlength, maxlength, min, max sau în funcție de tipul câmpului de intrare. Dacă este necesar, putem defini propria noastră logică de validare pentru scenarii personalizate. De exemplu, să luăm cel mai simplu exemplu: numele de utilizator nu trebuie să fie "admin". Pentru asta, vom defini următorul program:
<form id="registerForm" name="registerForm">
<p>
<label for="username">Username:</label><br>
<input id="username" name="username" maxlength="20" minlength="3" required>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const usernameField = document.registerForm.username;
const submit = registerForm.submit;
submit.addEventListener("click", validate);
function validate(){
if(usernameField.value === "admin"){
usernameField.setCustomValidity("Numele de utilizator nu este permis");
}
}
</script>În funcția validate verificăm valoarea câmpului usernameField. Dacă este egală cu "admin", atunci setăm un mesaj de eroare.
Deoarece am setat un mesaj de eroare, câmpul username nu mai trece validarea, chiar dacă corespunde atributelor required, maxlength și minlength. În consecință, putem obține acest mesaj prin proprietatea validationMessage:
<!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;}
#usernameErrors {padding:5px;background-color: #ffcccc; color:#b33939; display:none;}
</style>
</head>
<body>
<form id="registerForm" name="registerForm">
<p>
<label for="username">Username:</label><br>
<input id="username" name="username" maxlength="20" minlength="3" required>
<div id="usernameErrors"></div>
</p>
<button type="submit" id="submit" name="submit">Register</button>
</form>
<script>
const usernameErrors = document.getElementById("usernameErrors");
const usernameField = document.registerForm.username;
const submit = registerForm.submit;
submit.addEventListener("click", validate);
function validate(e){
if(usernameField.value === "admin"){
usernameField.setCustomValidity("Numele de utilizator nu este permis");
}
// verificăm validitatea
if(!usernameField.validity.valid){
usernameErrors.textContent = usernameField.validationMessage;
usernameErrors.style.display = "block";
}
else{
usernameErrors.textContent = "";
usernameErrors.style.display = "none";
e.preventDefault(); // prevenim trimiterea formularului și reîncărcarea paginii
}
}
</script>
</body>
</html>