I moduli sono onnipresenti nelle applicazioni web. Alcune app utilizzano i moduli per raccogliere dati per la registrazione degli utenti e per fornire un indirizzo email. Altri li usano per eseguire transazioni online per agevolare un'esperienza di acquisto.

Potresti utilizzare alcuni moduli web per richiedere il prestito per una nuova auto, mentre ne utilizzerai altri per ordinare la pizza per cena. Quindi è importante che i dati raccolti da quei moduli siano puliti, formattati correttamente e privi di qualsiasi codice dannoso. Questo processo è chiamato convalida del modulo.

Abbiamo bisogno della convalida del modulo ogni volta che accettiamo l'input dell'utente. Dobbiamo assicurarci che i dati inseriti siano nel formato corretto, rientrino in un intervallo di dati valido (ad esempio per i campi della data) e non contengano codice dannoso che potrebbe portare a iniezioni SQL. Dati non corretti o mancanti possono anche causare errori nell'API.

Quali sono i diversi tipi di convalida dei moduli?

La convalida del modulo può avvenire sul lato client e sul lato server.

La convalida lato client avviene utilizzando attributi HTML5 e JavaScript .

Potresti aver notato che in alcuni moduli, non appena inserisci un indirizzo e-mail non valido, il modulo visualizza un errore "Inserisci un'e-mail valida". Questo tipo immediato di convalida viene solitamente eseguito tramite JavaScript lato client.

In altri casi, potresti aver notato che quando compili un modulo e inserisci dettagli come una carta di credito, potrebbe mostrare una schermata di caricamento e quindi mostrare un errore "Questa carta di credito non è valida".

Qui, il modulo ha effettuato una chiamata al suo codice lato server che ha restituito un errore di convalida dopo aver eseguito ulteriori controlli della carta di credito. Questo caso di convalida in cui viene effettuata una chiamata lato server è chiamato convalida lato server.

Quali dati devono essere convalidati?

La convalida del modulo è necessaria ogni volta che accetti i dati da un utente. Ciò può includere:

1. Convalida del formato dei campi come indirizzo email, numero di telefono, codice postale, nome, password.
2. Convalida dei campi obbligatori
3. Verifica del tipo di dati come stringa vs numero per campi come il numero di previdenza sociale.
4. Assicurarsi che il valore immesso sia un valore valido per il paese, per la data e così via.

Come impostare la convalida lato client

Sul lato client, la convalida può essere eseguita in due modi:

1. Utilizzo della funzionalità HTML5
2. Utilizzo di JavaScript

Come impostare la convalida con la funzionalità di HTML5

HTML5 fornisce una serie di attributi per aiutare a convalidare i dati. Di seguito sono riportati alcuni casi comuni di convalida:

• Creazione di campi obbligatori utilizzando required
• Vincolare la lunghezza dei dati:
  • minlength, maxlength per dati di testo
  • min e max per impostare il range di valori per dati tipo numerico
• Limitazione del tipo di dati utilizzando type:
  • <input type="email" name="multiple">
• Specificare i modelli di dati utilizzando pattern:
  • specifica un modello regex a cui devono corrispondere i dati immessi

Quando il valore di input corrisponde a queste convalide di HTML5, gli viene assegnata una psuedo-class :valid, e :invalid in caso contrario.

Vediamo un esempio:

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" id="firstname" required maxlength="45">
<label for="lastname"> Last Name: </label>
<input type="text" name="lastname" id="lastname" required maxlength="45">
<button>Submit</button>
</form>

Link a JSFiddle

Qui abbiamo due campi obbligatori: Nome e Cognome. Prova questo esempio in JSFidle. Se salti uno di questi campi e premi invio, riceverai un messaggio "Please fill out this field". Questa è la convalida integrata usando HTML5.

Come impostare la convalida utilizzando JavaScript

Quando si implementa la convalida del modulo, ci sono alcune cose da considerare:

1. Quali sono i dati ritenuti "validi"? Questo ti aiuta a rispondere a domande su formato, lunghezza, campi obbligatori e tipo di dati.
2. Cosa succede quando vengono inseriti dati non validi? Questo ti aiuterà a definire l'esperienza dell'utente della convalida: se mostrare un messaggio di errore in linea al campo o nella parte superiore del modulo, quanto deve essere dettagliato il messaggio di errore, se il modulo deve essere comunque trasmesso, se c'è dell'analitica per tenere traccia del formato non valido di dati. E così via.

Puoi eseguire la convalida in JavaScript in due modi:

1. Convalida in linea utilizzando JavaScript
2. API HTML5 di convalida dei vincoli

Convalida in linea utilizzando JavaScript

<form id="form">
  <label for="firstname"> First Name* </label>
  <input type="text" name="firstname" id="firstname" />
  <button id="submit">Submit</button>

  <span role="alert" id="nameError" aria-hidden="true">
    Please enter First Name
  </span>
</form>

const submit = document.getElementById("submit");

submit.addEventListener("click", validate);

function validate(e) {
  e.preventDefault();

  const firstNameField = document.getElementById("firstname");
  let valid = true;

  if (!firstNameField.value) {
    const nameError = document.getElementById("nameError");
    nameError.classList.add("visible");
    firstNameField.classList.add("invalid");
    nameError.setAttribute("aria-hidden", false);
    nameError.setAttribute("aria-invalid", true);
  }
  return valid;
}

#nameError {
  display: none;
  font-size: 0.8em;
}

#nameError.visible {
  display: block;
}

input.invalid {
  border-color: red;
}

Link a JSFiddle

In questo esempio, controlliamo i campi obbligatori utilizzando JavaScript. Se un campo obbligatorio non è compilato, utilizziamo CSS per mostrare il messaggio di errore.

Le etichette Aria vengono modificate di conseguenza per segnalare un errore. Usando CSS per mostrare/nascondere un errore, stiamo riducendo il numero di manipolazioni necessarie da fare sui DOM. Il messaggio di errore viene fornito nel contesto, rendendo così intuitiva l'esperienza dell'utente.

API HTML5 convalida dei vincoli

Gli attributi in HTML required e pattern possono aiutare a eseguire la convalida di base. Ma se desideri una convalida più complessa o desideri fornire messaggi di errore dettagliati, puoi utilizzare l'API di convalida dei vincoli.

Alcuni metodi forniti da questa API sono:

1. checkValidity
2. setCustomValidity
3. reportValidity

Sono utili le seguenti proprietà:

1. validity
2. validationMessage
3. willValidate

In questo esempio, convalideremo utilizzando metodi integrati in HTML5 come required e length insieme all'API di convalida dei vincoli per fornire messaggi di errore dettagliati.

<form>
<label for="firstname"> First Name: </label>
<input type="text" name="firstname" required id="firstname">
<button>Submit</button>
</form>

const nameField = document.querySelector("input");

nameField.addEventListener("input", () => {
  nameField.setCustomValidity("");
  nameField.checkValidity();
  console.log(nameField.checkValidity());
});

nameField.addEventListener("invalid", () => {
  nameField.setCustomValidity("Please fill in your First Name.");
});

Link a JSFiddle

Non dimenticare la convalida lato server

La convalida lato client non è l'unico controllo di convalida che dovresti fare. Devi anche convalidare i dati ricevuti dal tuo client sul codice lato server per assicurarti che i dati corrispondano a ciò che ti aspetti che siano.

È inoltre possibile utilizzare la convalida lato server per eseguire verifiche della logica aziendale che non dovrebbero risiedere sul lato client.

Procedure consigliate per la convalida dei moduli

1. Avere sempre la convalida lato server, poiché malintenzionati possono eludere la convalida lato client.
2. Fornisci messaggi di errore dettagliati esplicitamente legati al campo che ha prodotto l'errore.
3. Fornisci un esempio di come dovrebbero apparire i dati in caso di un messaggio di errore, ad esempio - "L'email non corrispondeva al formato - test@example.com "
4. Evita di utilizzare singole pagine di errore che comportano il reindirizzamento. Questa è un'esperienza utente negativa e costringe l'utente a tornare a una pagina precedente per correggere il modulo e perdere il contesto.
5. Contrassegna sempre i campi obbligatori.

Ti interessano altri tutorial e articoli come questo? Iscriviti alla mia newsletter (in inglese) oppure seguimi su Twitter