Capire cos’è la convalida del modulo HTML5 e l’etichetta di input mobile

L’implementazione della convalida del modulo svolge un ruolo fondamentale nell’impedire agli utenti malevoli di inserire testo incomprensibile nei campi del modulo. Inoltre, impedisce agli utenti inesperti di inserire erroneamente informazioni errate nel modulo.

Ovviamente, non vorrai raccogliere dati errati dagli utenti in modo non sicuro. Pertanto, è fondamentale definire le regole di convalida per i moduli.

Per anni, abbiamo utilizzato il codice JavaScript complesso e TL; DR (cioè troppo lungo; non letto) per implementare la convalida del modulo sul lato client. Per fortuna, con il rilascio della "convalida del modulo HTML5" ora possiamo aggiungere convalide a un modulo con JavaScript minimo.

Mentre l’ultima versione della versione HTML offre diversi vantaggi, tuttavia, il più importante è che viene fornito con molti nuovi campi di input e attributi essenziali per convalidare un modulo senza la necessità di scrivere complicato codice di convalida JS (abbreviazione di JavaScript).

Ma ricorda che gli utenti possono facilmente sentirsi frustrati durante la compilazione di un modulo, specialmente quando vengono a sapere che i dati che hanno inserito sono sbagliati possono aumentare la loro frustrazione in misura maggiore. Ma grazie a HTML5, l’aggiunta di etichette di input mobili può convalidare i dati del modulo nello stesso momento in cui gli utenti compilano il modulo. In questo modo gli utenti sapranno immediatamente nel caso stiano commettendo errori nei campi di input.

Ad esempio, di seguito è riportata un’immagine pubblicata su Dribble da Matt Smith che dimostra come funziona il modello di etichetta mobile quando applicato a un modulo:

Questo post illustra come implementare etichette di input mobili quando si aggiungono convalide a un modulo HTML5.

Ma prima di iniziare

La maggior parte di voi potrebbe voler conoscere prima il processo di convalida di un modulo HTML5. Dopotutto, non tutti potreste avere esperienza nella scrittura di codice di convalida per un modulo HTML5. Inoltre, è possibile che tu non sia a conoscenza dei campi di input e degli attributi appena introdotti in HTML5.

Una panoramica dettagliata della convalida dei moduli HTML5

Quando si pianifica di convalidare un modulo, si consiglia di iniziare prima con la convalida lato server. E, nel caso in cui tu sia un buon web designer, procedi con l’aggiunta della convalida lato client, aiutando i tuoi utenti a ottenere un feedback immediato se stanno compilando il modulo con dati corretti o meno. Ad esempio, fornire un feedback immediato agli utenti quando inseriscono i dati nel campo dell’indirizzo e-mail consentirà loro di sapere che l’indirizzo e-mail inserito è valido.

Una delle fantastiche funzionalità di HTML5 è che aiuta a implementare la convalida lato client senza dipendere dagli script. Piuttosto puoi eseguire tale attività facendo uso di "attributi di convalida" sugli elementi del tuo modulo. Ancora più importante, devi solo aggiungere l’attributo "richiesto" per un campo di input mentre il tuo browser si occupa del resto.

Ecco un esempio che spiegherà l’uso dell’attributo required per aggiungere la convalida a un campo di input:

Name: <input type="text" name="yourname" required>

La suddetta riga di codice informa il tuo browser che il campo INPUT del nome deve essere considerato obbligatorio (cioè non può essere lasciato vuoto).

Come puoi vedere, viene visualizzato un contrassegno rosso nella casella di testo corrispondente al campo di inserimento "Il tuo nome". Ma non appena viene inserito del testo nel campo di inserimento del nome, l’indicatore si trasforma in un segno di spunta che indica che il valore inserito è valido.

A parte <input type="text">(cioè i tipi di input di testo), HTML5 ora supporta diverse nuove opzioni di input come search, email, tel, datetime, ecc. In parole semplici, con HTML5 possiamo scrivere la seguente riga di codice:

<input type="text" name="email">

in qualcosa del tipo:

<input type="email" name="email">

I browser desktop renderanno il codice sopra come qualsiasi campo di testo standard.

Un’altra cosa importante che vorrei portare alla tua attenzione è che: quando proverai a inserire attributi come required o input type="email" nella demo di CodePen anche senza alcun contenuto, riceverai comunque un errore messaggio facendo clic sul pulsante "INVIA" ​​senza alcun indirizzo email valido:

Nell’esempio che abbiamo discusso sopra, puoi vedere che il browser per impostazione predefinita visualizza un messaggio di errore. Ma cosa succede se si desidera applicare la propria regola di convalida (ad esempio personalizzata) al valore di input? È qui che torna utile il pattern Regex.

Comprensione dei pattern RegEx

Potresti aver visto schemi quando inserisci un indirizzo email come abc@a. Inutile dire che vorresti che i tuoi utenti inserissero un vero indirizzo e-mail. Inoltre, specificando la tua scelta di modello che corrisponde ai tuoi dati, contribuirai a convalidare il valore inserito. Ad esempio, puoi assicurarti che l’email corrisponda allo schema contenente tre o più caratteri alla fine. Per fare ciò, dovrai utilizzare "Attributo modello" ed Espressioni regolari (RegEx).

RegEx è fondamentalmente un linguaggio utilizzato per analizzare o manipolare il testo. Molto spesso, le espressioni regolari vengono utilizzate per eseguire operazioni complesse (come cercare e sostituire) per una migliore formazione dei dati di testo. Oggi puoi trovare l’uso di espressioni regolari in quasi tutti i linguaggi di programmazione e scripting. RegEx può essere utilizzato per convalidare i dati inseriti nei campi del modulo, applicandoli sui tipi di input utilizzando l’attributo pattern come segue:

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Inoltre, se si verificano errori di convalida, puoi scegliere di determinare un attributo title insieme all’errore di convalida per generare un messaggio oltre a "Formato errato!" utilizzando la seguente riga di codice:

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

Tieni presente che non è necessario scrivere alcun modello assurdo per ogni singolo input. Invece, in molti casi dovrai solo assegnare l’attributo richiesto a un particolare tipo di dati. Ad esempio, un numero superiore a 8 sarà simile a:

<input type="number" min="8" required>

Inoltre, tieni presente che non tutti i browser forniscono supporto per tutti gli attributi di convalida disponibili. Prendiamo, ad esempio, il browser Firefox non è compatibile con il modello "minlength".

Vantaggio dell’utilizzo della convalida del modulo HTML5

Il più grande vantaggio dell’implementazione della convalida del modulo HTML5 è il feedback istantaneo. Principalmente, una sorta di indicazione verrà evidenziata mentre gli utenti compilano alcuni campi in un modulo, per informarli se il valore inserito era valido o meno.

Ora, quando inserisci qualcosa nella casella di testo, il colore del bordo diventa verde come segue:

Tuttavia, come puoi vedere, c’è uno svantaggio in questo approccio. Anche quando si aggiunge un valore non valido (o incompleto) nel campo "Nome", l’utente riceve un’indicazione che il valore è corretto. Forse potresti pensare di aggiungere :invalid:not(:empty)al codice. Sfortunatamente tale logica non funzionerà con i browser poiché di solito considerano gli elementi del modulo come vuoti.

Ti stai chiedendo cosa fare?

Puoi provare ad aggiungere il nuovo pseudo-selettore chiamato ":placeholder-shown" nel codice come segue:

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Ma la maggior parte dei browser non sembra fornire supporto per segnaposto mostrato, quindi è meglio scrivere uno script per attivare o disattivare una classe quando il campo di input è vuoto o meno. Ecco il codice JavaScript per lo stesso:

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

NOTA: ricorda di rimuovere l’elemento segnaposto dal markup HTML sopra.

Ora, quando esegui lo snippet di codice sopra insieme al markup HTML5, l’output sarà simile a:

Come puoi vedere il colore della casella di testo rimane rosso fino a quando la validazione applicata al campo non è soddisfatta. E facendo clic su Invia viene visualizzato un messaggio di errore all’inserimento di un nome incompleto.

Tuttavia, non appena l’utente inserisce il testo completo (superando i 3 caratteri), il colore del bordo della casella di testo diventa verde.

Come puoi aggiungere un’etichetta di input mobile in HTML5?

E ora, discutiamo l’approccio dell’aggiunta di un’etichetta di input mobile durante la convalida del modulo HTML5. In questo modo, aiuta a migliorare l’aspetto e la sensazione della forma. Ecco il markup HTML.

Per implementare il modello di etichetta float, dovrai inserire il tag proprio sotto l’ <input>elemento nel markup HTML:

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

Il CSS sarà simile a:

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

E infine, scrivi il codice JavaScript:

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Produzione:

Puoi implementare diversi effetti quando utilizzi le etichette di input mobili in HTML5, ad esempio:

• Aggiungi icone con effetto dissolvenza in apertura/chiusura durante la convalida di un modulo HTML5.
• Scuotere l’input se i dati inseriti non sono validi.
• Riduci il colore degli input quando sono compilati correttamente.

Cose da considerare

Quando lavori sull’implementazione delle convalide in un modulo HTML5, devi avere familiarità con:

1. Supporto browser: i moduli HTML5 funzionano perfettamente nei browser moderni e in IE10+. Sebbene la versione 9 di IE e le versioni precedenti non supportino gli pseudo-selettori di convalida che ti impediscono di definire lo stile del modulo, funzionerà comunque correttamente.
2. Avvertenza: una cosa che non puoi eseguire quando applichi le convalide a un modulo HTML5 è lo stile dei messaggi di convalida. Questo perché tale funzionalità è disabilitata dai browser.

Parole finali

L’implementazione delle convalide in un modulo è fondamentale per aggiungere un ulteriore livello di sicurezza al tuo sito. Questo perché impedisce agli utenti malvagi di aggiungere testo dannoso come valore nei campi del modulo. Inoltre, fornire un feedback immediato agli utenti quando inseriscono un input in un campo di input convalidato del modulo contribuirà a migliorare la loro esperienza. Dopotutto, non dovranno perdere tempo a riconoscere di aver commesso un errore nel compilare il modulo. Tuttavia, la convalida di un modulo utilizzando solo JavaScript può essere impegnativa. È qui che la convalida del modulo HTML5 viene in tuo soccorso.

Quando si applicano le convalide a un modulo utilizzando HTML5, non è necessario scrivere lunghe righe di codice JS complesso. Invece, puoi implementare regole di convalida del modulo con una codifica JavaScript minima. Ancora più importante, molte nuove funzionalità sono disponibili con la convalida del modulo HTML5 come l’etichetta di input mobile che rende un modulo stupendo, incoraggiando gli utenti a eseguire l’invio del modulo.