La Constraint Validation API
Usi il controllo di validità integrato.
La Constraint Validation API è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.
Validazione integrata
I campi dei moduli HTML supportano attributi come required, min, max, pattern e type="email". La Constraint Validation API consente a JavaScript di esaminare e controllare questa validazione integrata.
checkValidity
checkValidity restituisce un booleano e genera un evento invalid su ogni controllo che non supera la validazione, senza mostrare il fumetto del browser.
const email = document.querySelector("#email");
console.log(email.checkValidity());reportValidity
reportValidity funziona come checkValidity, ma mostra anche l'interfaccia dei messaggi di validazione del browser per i campi non validi.
if (!form.reportValidity()) {
console.log("show built-in errors");
}L'oggetto validity
Ogni controllo dispone di un oggetto validity contenente flag booleani che descrivono esattamente il problema.
console.log(email.validity.valueMissing); // empty required
console.log(email.validity.typeMismatch); // wrong format
console.log(email.validity.tooShort);validity.valid
validity.valid è true solo quando il campo supera ogni vincolo e riassume lo stato degli altri flag.
if (email.validity.valid) {
console.log("ok");
}validationMessage
validationMessage contiene il messaggio localizzato che il browser mostrerebbe per l'errore corrente.
console.log(email.validationMessage);setCustomValidity
setCustomValidity contrassegna un campo come non valido con un messaggio personalizzato. Una stringa non vuota indica che il campo non è valido; una stringa vuota cancella l'errore.
function checkMatch() {
if (pass.value !== confirm.value) {
confirm.setCustomValidity("Passwords must match");
} else {
confirm.setCustomValidity("");
}
}Cancellare sempre gli errori personalizzati
Se imposta un messaggio personalizzato, deve cancellarlo con una stringa vuota quando il campo diventa valido, altrimenti rimarrà non valido per sempre.
confirm.addEventListener("input", () => {
confirm.setCustomValidity("");
checkMatch();
});L'evento invalid
Ascolti l'evento invalid per eseguire una logica personalizzata, ad esempio applicare uno stile a un campo, quando la validazione non riesce.
email.addEventListener("invalid", () => {
email.classList.add("error");
});Disabilitare i fumetti nativi
Aggiunga novalidate al modulo per sopprimere i popup nativi, continuando a utilizzare l'API per i propri messaggi.
form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
if (!form.checkValidity()) e.preventDefault();
});Applicare stili con :valid e :invalid
Le pseudo-classi CSS :valid e :invalid applicano automaticamente stili ai campi in base al loro stato di validità.
Verifica rapida
Regola di validazione personalizzata.
Riepilogo
La Constraint Validation API funziona con gli attributi HTML dei vincoli. Utilizzi checkValidity/reportValidity per verificare gli errori e, facoltativamente, mostrarli; esamini i flag di validity e validationMessage e aggiunga regole personalizzate con setCustomValidity, cancellandole con una stringa vuota. L'evento invalid e le pseudo-classi CSS :valid/:invalid aiutano ad applicare gli stili.
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 59
- Lezioni
- 200
Domande Frequenti
La lezione «La Constraint Validation API» è gratuita?
Sì — il testo completo di «La Constraint Validation API» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.
Cosa imparerò in «La Constraint Validation API»?
Usi il controllo di validità integrato. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare JavaScript Academy?
Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «La Constraint Validation API»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?
Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Leggere i valori degli input
- L'evento submit
- Validazione lato client
- La Constraint Validation API