checkValidity / reportValidity / setCustomValidity în JavaScript

form.checkValidity()
form.reportValidity()
input.setCustomValidity(mesaj)

Ce face checkValidity / reportValidity / setCustomValidity

checkValidity() verifică regulile HTML (required, minlength, pattern, type="email") și returnează true sau false, fără să afișeze nimic. reportValidity() face același lucru, dar afișează și bulele de eroare ale browserului. Ambele există pe formulare și pe fiecare câmp.

setCustomValidity(mesaj) marchează un câmp ca invalid, cu mesajul tău; cu un text gol ("") câmpul devine din nou valid. Este folosit pentru reguli pe care HTML nu le are, de exemplu confirmarea parolei.

Parametri

Parametru	Descriere
mesaj	Pentru setCustomValidity: mesajul de eroare sau "".

Ce returnează

checkValidity și reportValidity: true sau false.

Exemple

Exemplul 1: Confirmarea parolei

const parola = document.querySelector("#parola");
const confirmare = document.querySelector("#confirmare");

confirmare.addEventListener("input", () => {
  confirmare.setCustomValidity(confirmare.value === parola.value ? "" : "Parolele nu coincid");
});

parola.value = "Secret123";
confirmare.value = "Secret12";
confirmare.dispatchEvent(new Event("input"));
console.log(confirmare.checkValidity(), confirmare.validationMessage);
console.log(confirmare.form.reportValidity());

Rezultat în browser

false Parolele nu coincid
false

Greșeli frecvente

• Apelezi setCustomValidity("mesaj") și nu-l mai ștergi niciodată. Câmpul rămâne invalid pentru totdeauna; resetează cu "" când valoarea devine corectă.

Comenzi înrudite

• form.requestSubmit / submit / reset: Trimite un formular din cod (cu sau fără validare și evenimentul submit) sau îl readuce la valorile inițiale.
• FormData: Strânge câmpurile unui formular (inclusiv fișiere) în perechi nume–valoare, gata de trimis cu fetch.
• RegExp.prototype.test: Verifică dacă un text se potrivește cu o expresie regulată și returnează true sau false.