Introduzione alla convalida del vincolo HTML5

I siti Web e le applicazioni interattive non possono essere immaginati senza moduli che ci consentano di farlo connettersi con i nostri utenti, e a ottenere i dati abbiamo bisogno per garantire transazioni regolari con loro. Abbiamo bisogno input utente valido, tuttavia abbiamo bisogno di acquisirlo in un modo che non è frustrante i nostri utenti troppo.

Mentre possiamo migliorare l'usabilità dei nostri moduli con modelli di progettazione UX scelti in modo intelligente, HTML5 ha anche un meccanismo nativo per la convalida dei vincoli che ci consente di cattura gli errori di input direttamente nel front-end.

In questo post, ci concentreremo su convalida del vincolo fornita dal browser, e guarda in che modo gli sviluppatori di frontend possono farlo sicuro input utente valido usando HTML5.

Perché abbiamo bisogno della convalida dell'input del front-end

Convalida dell'input ha due obiettivi principali. Il contenuto che otteniamo deve essere:

1. Utile

Abbiamo bisogno dati utilizzabili con cui possiamo lavorare. Dobbiamo far entrare le persone dati realistici nel formato giusto. Ad esempio, nessuno che è vivo oggi è nato 200 anni fa. Ottenere dati come questo può sembrare strano all'inizio, ma a lungo termine è fastidioso e popola il nostro database con dati inutili.

2. Sicuro

Quando ci si riferisce alla sicurezza, questo significa che è necessario impedire l'iniezione di contenuti dannosi - sia intenzionale che per caso.

Utilità (ottenendo dati ragionevoli) può essere raggiunta solo dal lato client, la squadra di back-end non può aiutare troppo con questo. Per raggiungere sicurezza, gli sviluppatori front e back-end devono collaborare.

Se gli sviluppatori di frontend validano correttamente input sul lato client, il il team di back-end dovrà affrontare molte meno vulnerabilità. L'hacking (un sito) spesso comporta invio di dati aggiuntivi, o dati nel formato sbagliato. Gli sviluppatori possono combattere buche di sicurezza come queste, combattere con successo dal front-end.

Ad esempio, questa guida alla sicurezza di PHP consiglia di controllare tutto ciò che possiamo dal lato client. Sottolineano l'importanza della convalida dell'input di frontend fornendo molti esempi, come ad esempio:

"La convalida dell'input funziona meglio con valori estremamente limitati, ad esempio quando qualcosa deve essere un numero intero o una stringa alfanumerica o un URL HTTP."

Nella convalida dell'input del frontend, il nostro compito è quello di imporre limiti ragionevoli sull'input dell'utente. La funzione di convalida dei vincoli di HTML5 ci fornisce i mezzi per farlo.

Convalida vincoli HTML5

Prima di HTML5, gli sviluppatori di frontend erano limitati a convalida dell'input dell'utente con JavaScript, che era un processo noioso e soggetto a errori. Per migliorare la convalida dei moduli lato client, HTML5 ha introdotto a convalida dei vincoli algoritmo che viene eseguito nei browser moderni e controlla la validità dell'input presentato.

Per fare la valutazione, l'algoritmo usa il attributi relativi alla validazione degli elementi di input, ad esempio , </code>, e <code><select></code>. Se vuoi sapere come la convalida dei vincoli avviene passo dopo passo nel browser, controlla questo documento WhatWG.</p> <p>Grazie alla funzionalità di convalida dei vincoli di HTML5, possiamo eseguire tutto <strong>compiti di convalida dell'input standard</strong> dal lato del cliente <strong>senza JavaScript, solo con HTML5</strong>.</p> <p>Per eseguire attività più complesse relative alla convalida, HTML5 ci fornisce a <strong>API JavaScript di convalida vincoli</strong> possiamo usare per impostare i nostri script di convalida personalizzati.</p> <h4>Convalida con tipi di input semantici</h4> <p>HTML5 ha introdotto <strong>tipi di input semantici</strong> questo, oltre a indicare il significato dell'elemento per i programmi utente, può anche essere usato per <strong>convalidare l'input dell'utente</strong> limitando gli utenti a un determinato formato di input.</p> <p>Oltre ai tipi di input che sono già esistiti prima di HTML5 (<code>testo</code>, <code>parola d'ordine</code>, <code>Sottoscrivi</code>, <code>reset</code>, <code>Radio</code>, <code>casella di controllo</code>, <code>pulsante</code>, <code>nascosto</code>), possiamo anche usare il seguente <strong>tipi di input HTML5 semantico</strong>: <code>e-mail</code>,<code>tel</code>,<code>url</code>,<code>numero</code>,<code>tempo</code>,<code>Data</code>,<code>appuntamento</code>,<code>datetime-locali</code>, <code>mese</code>,<code>settimana</code>, <code>gamma</code>, <code>ricerca</code>,<code>colore</code>.</p> <p>Possiamo tranquillamente utilizzare i tipi di input HTML5 con i browser più vecchi, poiché si comportano come un <code><input type="text"></code> campo nei browser che non li supportano.</p> <p>Vediamo cosa succede quando l'utente inserisce il tipo di input sbagliato. Supponiamo di aver creato un campo di input email con il seguente codice:</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="youremail">La tua email:</label> <input type="email" name="email"> <input type="submit" value="Submit"> </form> </pre> <p>Quando l'utente digita una stringa che non utilizza un formato email, l'algoritmo di convalida dei vincoli <strong>non invia il modulo</strong>, e <strong>restituisce un messaggio di errore</strong>:</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.jpg"></figure><p>La stessa regola si applica anche ad altri tipi di input, ad esempio per <code>type = "url"</code> gli utenti possono solo inviare un input che segue il formato URL (inizia con un protocollo, come ad esempio <code>http: //</code> o <code>ftp: //</code>).</p> <p>Alcuni tipi di input usano un design <strong>non consente nemmeno agli utenti di inserire un formato di input errato</strong>, per esempio <code>colore</code> e <code>gamma</code>.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="bgcol">Colore di sfondo:</label> <input type="color" name="color"> <input type="submit" value="Submit"> </form> </pre> <p>Se usiamo il <code>colore</code> tipo di input l'utente è vincolato a scegliere un colore dal selettore di colori o rimanere con il nero predefinito. Il campo di input è <strong>vincolato dal design</strong>, quindi non lascia molte possibilità di errore dell'utente.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_2.jpg"></figure><p>Quando è appropriato, vale la pena considerare l'utilizzo del <code><select></code> Tag HTML che funziona in modo simile a questi tipi di input vincolati per progetto; consente agli utenti di scegliere da un elenco a discesa.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="favfruit">Il tuo frutto preferito:</label> <select name="fruit"> <option value="apple">Mela</option> <option value="pear">Pera</option> <option value="orange">arancia</option> <option value="raspberry">Lampone</option> </select> <input type="submit" value="Submit"> </form> </pre> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_3.jpg"></figure><h4>Utilizza gli attributi di convalida di HTML5</h4> <p>L'utilizzo di tipi di input semantici stabilisce alcuni vincoli su ciò che gli utenti possono inviare, ma in molti casi vogliamo andare un po 'oltre. Questo è quando il <strong>attributi relativi alla convalida</strong> del <code><input></code> l'etichetta può aiutarci.</p> <p>Gli attributi relativi alla convalida appartengono a determinati tipi di input (su cui non possono essere utilizzati <em>tutti</em> tipi) sui quali impongono ulteriori vincoli.</p> <h5>1. <code>necessario</code> per ottenere un input valido con tutti i mezzi</h5> <p>Il <code>necessario</code> l'attributo è l'attributo di convalida HTML più noto. È un <strong>attributo booleano</strong> il che significa che <strong>non ha alcun valore</strong>, dobbiamo semplicemente metterlo dentro il <code><input></code> tag se vogliamo usarlo:</p> <pre name="code"> <input type="email" name="email" required> </pre> <p>Se l'utente si dimentica di inserire un valore in un campo di input richiesto, il browser <strong>restituisce un messaggio di errore</strong> che li avverte di riempire il campo, e loro <strong>non può inviare il modulo</strong> fino a quando non hanno fornito un input valido. Ecco perché è importante sempre <strong>segnare visivamente</strong> campi obbligatori per gli utenti.</p> <p>Il <code>necessario</code> l'attributo può essere <strong>usato insieme ai seguenti tipi di input</strong>: <code>testo</code>, <code>ricerca</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code>, <code>parola d'ordine</code>, <code>Data</code>, <code>appuntamento</code>, <code>datetime-locali</code>, <code>mese</code>, <code>settimana</code>,<code>tempo</code>, <code>numero</code>, <code>casella di controllo</code>, <code>Radio</code>, <code>file</code>, più con il <code><textarea></code>e <code><select></code> Tag HTML.</p> <h5>2. <code>min</code>, <code>max</code> e <code>passo</code> per la convalida del numero</h5> <p>Il <code>min</code>, <code>max</code> e <code>passo</code> gli attributi ci permettono di <strong>metti dei vincoli sui campi di inserimento dei numeri</strong>. Possono essere usati insieme al <code>gamma</code>, <code>numero</code>, <code>Data</code>, <code>mese</code>, <code>settimana</code>, <code>appuntamento</code>, <code>datetime-locali</code>, e <code>tempo</code> tipi di input.</p> <p>Il <code>min</code> e <code>max</code> gli attributi forniscono un ottimo modo per facilmente <strong>escludere dati irragionevoli</strong>. Ad esempio l'esempio qui sotto costringe gli utenti a presentare un'età tra 18 e 120.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourage">Della tua età:</label> <input type="number" name="age" min="18" max="120"> <input type="submit" value="Submit"> </form> </pre> <p>Quando l'algoritmo di convalida dei vincoli urta in un input dell'utente inferiore al <code>min</code>, o più grande del <code>max</code> valore, impedisce di raggiungere il back-end e restituisce un messaggio di errore.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation_4.jpg"></figure><p>Il <code>passo</code> attributo <strong>specifica un intervallo numerico</strong> tra i valori legali di un campo di input numerico. Ad esempio, se vogliamo che gli utenti scelgano solo negli anni bisestili, possiamo aggiungere il <code>step = "4"</code> attributo al campo. Nell'esempio seguente ho usato il <code>numero</code> tipo di input, in quanto non c'è <code>type = "anno"</code> in HTML5.</p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourleapyear">Il tuo anno bisestile preferito:</label> <input type="number" name="leapyear" min="1972" max="2016" step="4"> <input type="submit" value="Submit"> </form> </pre> <p>Con i vincoli preimpostati, gli utenti possono scegliere solo tra gli anni bisestili tra il 1972 e il 2016 se usano la piccola freccia in su che viene fornita con <code>numero</code> tipo di input. Possono anche digitare manualmente un valore nel campo di input, ma nel caso non soddisfi i vincoli, il browser restituirà un messaggio di errore.</p> <figure> <img src="//savtec.org/img/images_1/intro-into-html5-constraint-validation.gif"></figure><h5>3. <code>lunghezza massima</code> per la convalida della lunghezza del testo</h5> <p>Il <code>lunghezza massima</code> attributo rende possibile <strong>imposta una lunghezza massima del carattere</strong> per i campi di input testuali. Può essere usato insieme al <code>testo</code>, <code>ricerca</code>, <code>url</code>, <code>tel</code>, <code>e-mail</code> e <code>parola d'ordine</code> tipi di input e con il <code><textarea></code> Tag HTML.</p> <p>Il <code>lunghezza massima</code> l'attributo può essere un'ottima soluzione per i campi del numero di telefono che non possono avere più di un certo numero di caratteri o per i moduli di contatto in cui non vogliamo che gli utenti scrivano più di una certa lunghezza.</p> <p>Il frammento di codice seguente mostra un esempio per quest'ultimo, limita i messaggi utente a 500 caratteri. </p> <pre name="code"> <form name="form" action="#" method="post"> <label for="yourmsg">Messaggio (max 500 caratteri):</label> <textarea name="msg" cols="25" rows="4" maxlength="500">

Il lunghezza massima attributo non restituisce un messaggio di errore, ma il browser semplicemente non consente agli utenti di digitare più del numero di caratteri specificato. Ecco perché è fondamentale informare gli utenti del vincolo, altrimenti non capiranno perché non possono continuare con la digitazione.

 4. modello per la convalida del Regex
 Il modello attributo ci permettono di usa le espressioni regolari nel nostro processo di convalida dell'input. Un'espressione regolare è a set predefinito di caratteri che formano un certo schema. Possiamo usarlo sia per cercare stringhe che seguono lo schema, sia per far rispettare un determinato formato definito dal pattern.
 Con il modello attributo possiamo fare il secondo - costringere gli utenti a inviare i loro input in un formato che corrisponde all'espressione regolare data.
  Il modello l'attributo ha molti casi d'uso, ma può essere particolarmente utile quando vogliamo convalidare un campo password.
 L'esempio seguente richiede agli utenti di inserire una password di almeno 8 caratteri e che contenga almeno una lettera e un numero (fonte della regex che ho usato). 
   * La tua password:   
 
 Ancora un paio di cose
 In questo articolo, abbiamo visto come utilizzare il convalida del modulo fornita dal browser fornito dall'algoritmo di convalida del vincolo nativo di HTML5. Per creare i nostri script di convalida personalizzati, è necessario utilizzare l'API Convalida convalida che può essere il prossimo passo per perfezionare le competenze di convalida dei moduli.
 I moduli HTML5 sono accessibili tramite tecnologie assistive, quindi non dobbiamo necessariamente usare il Aria-required Attributo ARIA per contrassegnare i campi di input richiesti per gli screen reader. Tuttavia può essere ancora utile aggiungere il supporto dell'accessibilità per i browser più vecchi. È anche possibile disattivare la convalida dei vincoli aggiungendo il novalidate attributo booleano al 
 elemento.