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

L'implementazione della convalida dei moduli svolge un ruolo fondamentale nell'impedire agli utenti malevoli di inserire testo senza senso 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 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 dei moduli sul lato client. Per fortuna, con il rilascio della "convalida del modulo HTML5" ora possiamo aggiungere convalide a un modulo con JavaScript minimo.

Sebbene l'ultima versione della versione HTML offra numerosi vantaggi, tuttavia, il più importante è che viene fornito con molti nuovi campi di input e attributi essenziali per la convalida di un modulo senza la necessità di scrivere un 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 erano sbagliati può 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 in cui stiano commettendo errori nei campi di input.

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

Questo post spiega 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 prima conoscere 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 abbia conoscenza dei campi di input e degli attributi appena introdotti in HTML5.

Una panoramica dettagliata della convalida dei moduli HTML5

Quando si prevede 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 indipendentemente dal fatto che stiano 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 era 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 resto è curato dal tuo browser.

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

[php]
Nome: <input type="text" name="yourname" required>
[/php]

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

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

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

[php]
<tipo di input="testo" name="email">
[/php]

in qualcosa come:

[php]
<input type="email" name="email">
[/php]

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

Un'altra cosa importante che vorrei portare alla tua attenzione è che: quando proverai a inserire gli attributi come richiesto o input type="email" nella demo di CodePen anche senza alcun contenuto, riceverai comunque un errore messaggio cliccando 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 il modello Regex torna utile.

Comprensione dei modelli RegEx

Potresti aver visto degli schemi quando inserisci un indirizzo email come abc@a. Inutile dire che vorresti che i tuoi utenti inserissero un vero indirizzo e-mail. E, specificando la tua scelta del modello che corrisponde ai tuoi dati, aiuterà a convalidare il valore inserito. Ad esempio, puoi assicurarti che l'e-mail corrisponda al modello contenente tre o più caratteri alla fine. Per fare ciò, dovrai utilizzare "attributo Pattern" 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 ricerca e sostituzione) 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 ai tipi di input utilizzando l'attributo pattern come segue:

[php]
<input id="phone" placeholder="111-111-1111" title="Testo per trasmettere il modello per il numero di telefono" pattern richiesto="[0-9]{3}-[0-9]{3}-[ 0-9]{4}">
[/php]

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 riga di codice indicata di seguito:

[php]
<input type="email" placeholder="Email" pattern richiesto="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A- Za-z]{2,}$" title="Inserisci qui un indirizzo email valido.">
[/php]

Tieni presente che non è necessario scrivere alcun modello assurdo per ogni 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:

[php]
<tipo di input="numero" min="8" richiesto>
[/php]

Inoltre, tieni presente che non tutti i browser forniscono supporto per tutti gli attributi di convalida disponibili. Prendi, 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 dei moduli HTML5 è il feedback istantaneo. Per lo più, una sorta di indicazione verrà evidenziata mentre gli utenti compilano alcuni campi di un modulo, per informarli se il valore inserito è valido o meno.

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

Tuttavia, come puoi vedere, c'è un aspetto negativo 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) nel codice. Sfortunatamente tale logica non funzionerà con i browser poiché di solito considerano gli elementi del modulo vuoti.

Ti chiedi cosa fare?

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

[php]
<modulo>
<etichetta>
<span>Nome</span>
<input type="text" pattern=".{4,}" placeholder=" " required title="Inserisci almeno 4 caratteri.">
</etichetta>

<button>Invia</button>

</modulo>
[/php]

Ma la maggior parte dei browser non sembra fornire supporto per i segnaposto mostrati, 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:

[php]
$('input:vuoto, area di testo:vuoto').addClass('vuoto');

$('input').keyup(funzione () {

se ($(questo).val().trim() !== ”) {

$(questo).removeClass('vuoto');

} altro {

$(questo).addClass('vuoto');

}

});
[/php]

NOTA : ricordarsi 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 convalida applicata al campo non viene soddisfatta. E facendo clic su Invia viene visualizzato un messaggio di errore durante l'inserimento di un nome incompleto.

Ma, non appena l'utente inserisce il completo (che supera 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'elemento <input> nel tuo markup HTML:

[php]
<modulo>
<etichetta>
<input type="text" pattern=".{4,}" required title="I caratteri non devono essere inferiori a 4.">
<span>Il tuo nome</span>
</etichetta>
<etichetta>
<input type="email" pattern richiesto="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{ 2,}$" title="Inserisci un indirizzo email valido.">
<span>La tua email</span>
</etichetta>
<button>Invia</button>

</modulo>
[/php]

I CSS avranno un aspetto simile a:

[css]
etichetta {
posizione: relativa;
display: blocco in linea;
}
intervallo etichetta {
posizione: assoluta;
a sinistra: 20px;
in alto: -2em;
dimensione del carattere: .75em;
cursore: testo;
colore: #f27853;
transizione: tutti i 150 ms facilità;
}
ingresso {
bordo: 1px solido #f2f2f2;
contorno: nessuno;
}
input: focus {
colore bordo: #d9d9d9;
}
input:valido {
colore del bordo: #42d142;
}
input:non valido {
colore del bordo: #ff8e7a;
}
input.vuoto {
colore bordo: #d9d9d9;
}
input.vuoto + intervallo {
superiore: 50%;
trasforma: traduciY(-50%);
dimensione del carattere: 1em;
sfondo: nessuno;
colore: #cccccc;
}
corpo {
display: flessibile;
altezza minima: 100vh;
sfondo: #f1f1f1;
famiglia di caratteri: 'Lato', sans-serif;
dimensione del carattere: 150%;
}
modulo {
margine: automatico;
}

immissione, pulsante {
imbottitura: 15px 20px;
raggio di confine: 1px;
bordo: 2px solido #bdbdbd;
}

pulsante {
colore del bordo: #363636;
sfondo: #363636;
colore: #FFFFFF;
}
[/css]

E infine, scrivi il codice JavaScript:

[codice]
$('input:vuoto, area di testo:vuoto').addClass('vuoto');
$('input').keyup(funzione () {
se ($(questo).val().trim() !== ”) {
$(questo).removeClass('vuoto');
} altro {
$(questo).addClass('vuoto');
}
});
[/codice]

Produzione:

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

• Aggiungi icone con effetto dissolvenza in entrata/uscita durante la convalida di un modulo HTML5.
• Scuotere l'input se i dati inseriti non sono validi.
• Rendi più scuro il colore degli input quando sono compilati correttamente.

Cose da considerare

Quando si lavora sull'implementazione delle convalide in un modulo HTML5, è necessario avere familiarità con:

1. Supporto del browser : i moduli HTML5 funzionano nei browser moderni e IE10+ in modo perfetto. Sebbene IE versione 9 e versioni precedenti non supportino gli pseudo-selettori di convalida che ti impediscono di applicare uno stile al modulo, ma 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 istantaneo agli utenti quando immettono un input in un campo di input convalidato del modulo aiuterà a migliorare la loro esperienza. Dopotutto, non dovranno perdere tempo a riconoscere di aver commesso un errore nella compilazione del modulo. Tuttavia, la convalida di un modulo utilizzando JavaScript da solo può essere difficile. È 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 dei moduli 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 splendido, incoraggiando gli utenti a eseguire l'invio del modulo.