𝗩𝗮𝗹𝗶𝗱𝗮𝘇𝗶𝗼𝗻𝗲 𝗱𝗲𝗶 𝗺𝗼𝗱𝘂𝗹𝗶 𝗻𝗲𝗹 𝟮𝟬𝟮𝟲: 𝘀𝗺𝗲𝘁𝘁𝗶 𝗱𝗶 𝘂𝘀𝗮𝗿𝗲 𝗹𝗶𝗯𝗿𝗲𝗿𝗶𝗲 𝗶𝗻𝘂𝘁𝗶𝗹𝗺𝗲𝗻𝘁𝗲
Non hai bisogno di una pesante libreria JavaScript per validare un modulo nel 2026.
Il mese scorso ho rilasciato un modulo di checkout senza utilizzare alcuna libreria di validazione. Gestiva i campi obbligatori, il formato delle email e la lunghezza delle password utilizzando solo HTML nativo e 30 righe di JavaScript.
Prima di eseguire npm install, usa questi sei attributi nativi per risolvere la maggior parte dei problemi:
• required: Impedisce l'invio di campi vuoti per testo, select e checkbox.
• type: Usa type="email" o type="url" per intercettare errori di formato di base.
• minlength e maxlength: Impongono limiti di caratteri senza logica personalizzata.
• min, max e step: Controllano gli intervalli per numeri e date.
• pattern: Utilizza le regex per imporre formati specifici come i codici postali.
• inputmode e autocomplete: Riducono gli errori mostrando la tastiera corretta o compilando dati già noti.
Se i messaggi nativi sono troppo generici, usa la Constraint Validation API.
Ogni input ha un oggetto validity. Puoi controllare proprietà come valueMissing o typeMismatch per scrivere messaggi di errore utili. Usa setCustomValidity per mostrare il tuo testo personalizzato.
Ricordati di cancellare il tuo messaggio personalizzato sull'evento input. In caso contrario, il campo rimarrà bloccato in uno stato di errore anche dopo che l'utente lo avrà corretto.
Per lo styling, smetti di usare JavaScript per tracciare se un campo è stato "touched".
La pseudo-classe CSS :user-invalid gestisce ora questo compito. Applica gli stili solo dopo che l'utente ha interagito con un campo. Combinatela con il selettore :has() per mostrare automaticamente il testo di errore. Questo elimina decine di righe di codice non necessarie.
Quando dovresti effettivamente