La validazione dei form è una delle funzionalità più importanti nello sviluppo di siti web e applicazioni moderne. Permette infatti di verificare che i dati inseriti dagli utenti siano corretti prima dell'invio, migliorando l'esperienza di utilizzo e riducendo la possibilità di errori o informazioni incomplete.
Sebbene l'HTML metta già a disposizione alcuni strumenti di validazione integrati, creare un validatore personalizzato con JavaScript offre un livello di controllo molto più avanzato. È possibile, ad esempio, verificare la lunghezza di un testo, controllare il formato di un indirizzo email, confrontare più campi tra loro e mostrare messaggi di errore completamente personalizzati.
Guida alla creazione di un validatore di form con JavaScript
In questa guida realizzeremo passo dopo passo un sistema di validazione personalizzato utilizzando HTML, CSS e JavaScript puro, senza l'utilizzo di librerie esterne. Il risultato finale sarà un form moderno e intuitivo che evidenzierà gli errori in tempo reale e guiderà l'utente nella corretta compilazione dei campi richiesti.
I linguaggi che verranno utilizzati
Per realizzare questo validatore di form personalizzato utilizzeremo tre tecnologie fondamentali dello sviluppo web front-end:
- HTML per creare la struttura del modulo e i campi che l'utente dovrà compilare.
- CSS per definire l'aspetto grafico del form, evidenziare eventuali errori e migliorare la leggibilità dei messaggi di validazione.
- JavaScript per gestire tutta la logica di controllo dei dati inseriti e mostrare feedback immediati all'utente.
L'obiettivo sarà creare un semplice modulo di registrazione composto da alcuni campi comuni, come nome, email e password. Quando l'utente proverà a inviare il form, il codice JavaScript controllerà automaticamente che tutti i dati rispettino i requisiti definiti.
Se un campo risulterà compilato in modo errato, verrà evidenziato con uno stile dedicato e comparirà un messaggio di errore specifico. Al contrario, i campi validi potranno essere contrassegnati visivamente per confermare all'utente che i dati inseriti sono corretti.
Il risultato finale sarà un sistema di validazione completamente personalizzabile, facilmente adattabile a qualsiasi progetto web e ideale per migliorare sia l'usabilità che l'affidabilità dei moduli di contatto, registrazione o richiesta informazioni.
Il codice HTML per il form
Iniziamo creando la struttura del nostro form. Inseriremo tre campi di input dedicati a nome, email e password, oltre a uno spazio riservato ai messaggi di errore che verranno gestiti tramite JavaScript.
<body>
<form id="customForm">
<div class="form-group">
<label for="name">Nome</label>
<input type="text" id="name" placeholder="Inserisci il tuo nome" />
<small class="error-message"></small>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Inserisci la tua email" />
<small class="error-message"></small>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
placeholder="Inserisci la password"
/>
<small class="error-message"></small>
</div>
<button type="submit">Invia</button>
</form>
</body>Questo markup rappresenta la base del nostro validatore. Ogni campo è racchiuso all'interno di un contenitore .form-group, che include l'etichetta descrittiva, il campo di input e un elemento <small> destinato a visualizzare eventuali messaggi di errore. Il pulsante finale consentirà all'utente di inviare il modulo dopo aver completato la compilazione.
Il codice CSS
Ora aggiungiamo lo stile grafico del form. Oltre a migliorare l'aspetto generale dell'interfaccia, il CSS ci permetterà di evidenziare visivamente i campi validi e quelli che contengono errori, offrendo un feedback immediato all'utente.
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 6px;
font-weight: bold;
}
input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
input.error {
border-color: #e74c3c;
}
input.success {
border-color: #2ecc71;
}
.error-message {
display: block;
margin-top: 5px;
color: #e74c3c;
font-size: 14px;
min-height: 18px;
}
button {
padding: 12px 20px;
border: none;
border-radius: 6px;
background: #0073ff;
color: #fff;
cursor: pointer;
font-size: 16px;
}
button:hover {
opacity: 0.9;
}Grazie a queste regole CSS, il form risulterà ordinato e facilmente leggibile. Le classi .error e .success verranno aggiunte dinamicamente tramite JavaScript per modificare il colore del bordo degli input in base all'esito della validazione, mentre l'elemento .error-message mostrerà eventuali messaggi di errore direttamente sotto il campo interessato.
Lo script JavaScript per la validazione del form
const form = document.getElementById("customForm");
const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
form.addEventListener("submit", function (e) {
e.preventDefault();
validateInputs();
});
function validateInputs() {
const nameValue = nameInput.value.trim();
const emailValue = emailInput.value.trim();
const passwordValue = passwordInput.value.trim();
// Nome
if (nameValue === "") {
setError(nameInput, "Il nome è obbligatorio");
} else {
setSuccess(nameInput);
}
// Email
if (emailValue === "") {
setError(emailInput, "L'email è obbligatoria");
} else if (!isValidEmail(emailValue)) {
setError(emailInput, "Inserisci un'email valida");
} else {
setSuccess(emailInput);
}
// Password
if (passwordValue.length < 6) {
setError(passwordInput, "La password deve avere almeno 6 caratteri");
} else {
setSuccess(passwordInput);
}
}
function setError(input, message) {
const formGroup = input.parentElement;
const errorDisplay = formGroup.querySelector(".error-message");
errorDisplay.innerText = message;
input.classList.add("error");
input.classList.remove("success");
}
function setSuccess(input) {
const formGroup = input.parentElement;
const errorDisplay = formGroup.querySelector(".error-message");
errorDisplay.innerText = "";
input.classList.add("success");
input.classList.remove("error");
}
function isValidEmail(email) {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}Risultato e commento del risultato
Una volta messi insieme HTML, CSS e JavaScript, otterremo un form completamente funzionante con validazione personalizzata lato client. Il comportamento sarà immediato e intuitivo: al momento dell'invio, ogni campo verrà controllato secondo le regole definite e, in caso di errore, l'utente riceverà un feedback chiaro e visivo direttamente sotto il relativo input.
I campi non validi verranno evidenziati con un bordo rosso e accompagnati da un messaggio esplicativo, mentre quelli corretti assumeranno uno stile positivo che conferma la validità dei dati inseriti. Questo tipo di interazione migliora l'esperienza utente, evitando confusione e riducendo gli errori in fase di invio.
Dal punto di vista tecnico, la struttura è volutamente semplice ma scalabile. Il codice JavaScript è organizzato in funzioni separate, così da mantenere la logica pulita e facilmente riutilizzabile in altri progetti. Inoltre, la separazione tra gestione degli errori (setError), gestione del successo (setSuccess) e validazioni specifiche rende il sistema facilmente estendibile, ad esempio aggiungendo nuovi campi o regole più complesse.
Questo approccio rappresenta una base solida per la creazione di sistemi di validazione più avanzati. Come quelli con controllo in tempo reale (real-time validation) o integrazione con API esterne.
Conclusione
Creare un validatore di form personalizzato con JavaScript è un ottimo esercizio per comprendere meglio la gestione degli eventi, la manipolazione del DOM e la logica di controllo dei dati lato client. Anche se le tecnologie moderne offrono già strumenti integrati per la validazione, costruire una soluzione su misura permette di avere il pieno controllo sulla UX e sul comportamento del form.
In questo tutorial abbiamo visto come, partendo da una semplice struttura HTML, sia possibile aggiungere uno stile coerente tramite CSS e una logica dinamica con JavaScript per validare i campi in modo chiaro ed efficace. Il risultato è un componente riutilizzabile e adattabile a qualsiasi progetto.
Da qui puoi evolvere ulteriormente questo sistema, ad esempio introducendo la validazione in tempo reale mentre l'utente digita, o integrare controlli più avanzati come la verifica della forza della password o la comunicazione con un server per controllare la disponibilità di un'email.
Con questa base, hai ora uno strumento solido per migliorare la qualità dei tuoi form e rendere le tue interfacce più professionali e user-friendly.
