Corsi on-line

Messaggi di errore personalizzati per i form in HTML5

Prima di HTML5 esistevano fondamentalmente due metodi per associare dei messaggi di errore ai form, si poteva utilizzare JavaScript per intercettare i parametri passati tramite i campi e validarli direttamente lato client o, lato server, adottare un linguaggio come PHP e definire dei controlli destinati ad elaborare i medesimi argomenti inviati via metodo GET o POST.

HTML5L’ultima versione del markup per le pagine Web consente invece di effettuare la stessa procedura senza dover ricorrere ad un secondo linguaggio per lo scripting.

A tal proposito si analizzi l’esempio seguente, in pratica si tratta di un semplice form destinato ad inviare un unico parametro, cioè un codice di avviamento postale in formato italiano (cinque caratteri numerici); l’esito del controllo sul parametro dipenderà dal risultato del confronto tra il valore digitato dall’utilizzatore nel relativo campo e un’espressione regolare introdotta tramite l’attributo pattern:

<form>
<label for="cap">Codice di Avviamento Postale</label>
<input type="text" id="cap" pattern="[0-9]{5}" title="Il formato corretto per il CAP è composto da 5 caratteri di tipo numerico." required>
<input type="submit" value="Invia">
</form>

Sostanzialmente il pattern consentirà unicamente l’inserimento di caratteri numerici interi compresi nell’intervallo da “0” a “9” ([0-9]), questi ultimi dovranno essere “5”, né uno di più ne uno di meno ({5}); il parametro sarà obbligatorio per via del vincolo posto dall’attributo required, nel caso in cui esso dovesse essere indicato ma non corretto, verrà notificato il messaggio di errore introdotto dall’attributo title:

Il formato corretto per il CAP è composto da 5 caratteri di tipo numerico.

Da notare che anche in questo caso l’attributo title svolge una funzione molto simile (ma più evoluta) rispetto a quella già prevista nelle specifiche di HTML 4.01, cioè fornire informazioni addizionali relativamente ad un elemento specifico.

Post correlati
I più letti del mese
Tematiche