Introduzione
Le strutture condizionali sono uno degli strumenti più importanti in JavaScript perché permettono al programma di prendere decisioni. Quando scrivi codice per una pagina web, spesso devi reagire a situazioni diverse: un campo è vuoto, un valore è valido, un utente ha scelto un’opzione specifica, oppure un modulo deve mostrare messaggi differenti in base allo stato corrente.
In questo tutorial vediamo un sotto-argomento molto pratico: gestire il flusso di un form usando if, else e switch. È un caso reale e utile perché i moduli sono presenti in quasi tutte le applicazioni: login, registrazione, contatti, checkout, prenotazioni e molto altro.
L’obiettivo è costruire un piccolo esempio in cui un form cambia comportamento in base al tipo di operazione scelta dall’utente: login, registrazione oppure recupero password. In base alla scelta, il codice eseguirà controlli diversi e mostrerà messaggi appropriati.
Codice completo
// Simuliamo i dati provenienti da un form
const formData = {
action: "register", // "login", "register", "reset"
email: "[email protected]",
password: "Password123!",
confirmPassword: "Password123!",
rememberMe: true
};
// Funzione di utilità per verificare se una stringa non è vuota
function isNotEmpty(value) {
return typeof value === "string" && value.trim() !== "";
}
// Funzione principale che gestisce il flusso del form
function handleFormSubmission(data) {
// Controllo iniziale: email sempre obbligatoria
if (!isNotEmpty(data.email)) {
return {
success: false,
message: "L´email è obbligatoria."
};
}
// Normalizziamo l´azione per evitare errori di maiuscole/minuscole
const action = data.action.toLowerCase();
let result;
switch (action) {
case "login":
// Nel login servono email e password
if (!isNotEmpty(data.password)) {
result = {
success: false,
message: "Inserisci la password per accedere."
};
} else {
result = {
success: true,
message: data.rememberMe
? "Login effettuato con salvataggio sessione."
: "Login effettuato senza salvataggio sessione."
};
}
break;
case "register":
// Nella registrazione servono password e conferma password
if (!isNotEmpty(data.password) || !isNotEmpty(data.confirmPassword)) {
result = {
success: false,
message: "Compila sia la password sia la conferma password."
};
} else if (data.password !== data.confirmPassword) {
result = {
success: false,
message: "Le password non coincidono."
};
} else if (data.password.length < 8) {
result = {
success: false,
message: "La password deve contenere almeno 8 caratteri."
};
} else {
result = {
success: true,
message: "Registrazione completata con successo."
};
}
break;
case "reset":
// Nel recupero password basta l´email
result = {
success: true,
message: "Se l´email è registrata, riceverai un link per il reset."
};
break;
default:
result = {
success: false,
message: "Operazione non valida. Usa login, register o reset."
};
}
return result;
}
// Eseguiamo la funzione e stampiamo il risultato
const output = handleFormSubmission(formData);
console.log(output);Spiegazione
Il codice parte da un oggetto formData, che rappresenta i dati inviati da un form. In un’app reale questi valori arriverebbero da input HTML, ma qui li simuliamo per concentrarci sulla logica.
1. Il primo controllo con if
La funzione handleFormSubmission inizia con un controllo fondamentale:
if (!isNotEmpty(data.email)) {
return {
success: false,
message: "L´email è obbligatoria."
};
}Qui usiamo if per verificare una regola valida in tutti i casi: l’email non può mancare. Se il controllo fallisce, la funzione termina subito con return. Questo è un approccio molto utile perché evita annidamenti inutili e rende il codice più leggibile.
2. switch per selezionare il flusso principale
Dopo il controllo iniziale, il codice usa switch per gestire il tipo di operazione richiesta:
- login: accesso all’account
- register: creazione di un nuovo account
- reset: recupero password
Lo switch è una scelta molto comoda quando devi confrontare una sola variabile con più valori possibili. In questo caso, la variabile è action.
3. if ed else dentro ogni caso
All’interno di ogni case usiamo ancora if e else if per applicare regole specifiche.
Nel caso login, controlliamo se la password è presente. Se manca, restituiamo un errore. Se invece è presente, costruiamo un messaggio diverso in base a rememberMe:
message: data.rememberMe
? "Login effettuato con salvataggio sessione."
: "Login effettuato senza salvataggio sessione."Anche se qui compare un operatore ternario, il punto importante è che il flusso principale resta governato da if, else e switch.
Nel caso register, i controlli sono più numerosi:
- password compilata
- conferma password compilata
- password uguale alla conferma
- password lunga almeno 8 caratteri
Questa sequenza mostra bene come if e else if siano perfetti per gestire regole progressive, una dopo l’altra.
4. default nello switch
Il blocco default intercetta i valori non previsti. È molto utile per evitare comportamenti imprevedibili quando l’utente o il sistema inviano un’azione non supportata.
default:
result = {
success: false,
message: "Operazione non valida. Usa login, register o reset."
};Best practice
Quando usi le strutture condizionali nei form, alcune buone pratiche rendono il codice più robusto e facile da mantenere.
- Valida prima i campi comuni: se un dato è obbligatorio per tutti i casi, controllalo subito con un if iniziale.
- Usa switch per più scenari chiari: se devi gestire molte azioni alternative su una stessa variabile, switch è spesso più leggibile di una lunga catena di if...else if.
- Normalizza gli input: converti valori come action in minuscolo con toLowerCase() per evitare errori dovuti a maiuscole/minuscole.
- Evita annidamenti eccessivi: usa return anticipati quando possibile, così il codice resta più lineare.
- Separa la logica dalla UI: la funzione di validazione o gestione del flusso dovrebbe restituire un risultato, mentre l’interfaccia si occupa di mostrarlo.
- Scrivi messaggi chiari: un buon messaggio d’errore aiuta l’utente a correggere rapidamente il problema.
Un altro consiglio importante è quello di non usare switch quando devi confrontare condizioni complesse, come intervalli numerici o combinazioni di più variabili. In quei casi, if e else if sono più adatti.
Riepilogo
In questo tutorial abbiamo visto come usare if, else e switch per gestire il flusso di un form in JavaScript. L’esempio ha mostrato un caso reale: un modulo che cambia comportamento in base all’azione scelta dall’utente.
- if serve per i controlli iniziali e per le condizioni semplici.
- else if è utile quando devi verificare più condizioni in sequenza.
- switch è ideale per distinguere tra più scenari basati sullo stesso valore.
- Un buon flusso di validazione rende il codice più chiaro, sicuro e facile da estendere.
Se impari a combinare bene queste strutture, riuscirai a scrivere logiche form molto più pulite e affidabili, evitando codice confuso e difficile da mantenere.
Approfondisci con risorse ufficiali
- MDN Web Docs - if...else: documentazione completa e aggiornata sulle istruzioni condizionali.
- MDN Web Docs - switch: guida ufficiale all’istruzione switch in JavaScript.
- MDN Web Docs - return: utile per capire come interrompere una funzione in modo chiaro.
- MDN Web Docs - String.prototype.toLowerCase(): per normalizzare stringhe prima dei controlli.
- JavaScript.info: ottima risorsa didattica per approfondire la logica condizionale e la programmazione JavaScript.