Corsi on-line

Validazione HTML5 con Validatr

Validatr è una soluzione per la validazione dei form che basa il suo funzionamento sugli attributi input di HTML5; si tratta in pratica di un plugin cross-browser per il framework JavaScript jQuery che potrà essere utilizzato liberamente in modo da sfruttare le numerose tipologie di parametri supportate e riconosciute durante l’elaborazione dei form (email, cifre, URL, intervalli, colori e date).

Validatr

Validatr consente di definire facilmente messaggi di errore personalizzati sulla base del progetto corrente, tutte le notifiche potranno poi essere stilizzate tramite semplici regole CSS; per utilizzare la libreria sarà necessario innanzitutto includere jQuery (nell’esempio seguente ciò viene effettuato tramite CDN), in secondo luogo si potrà richiamare il file del plugin:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/validatr.js" type="text/javascript"></script>

Fatto questo sarà possibile utilizzare Validatr per il form corrente tramite una chiamata come la seguente:

<script>
jQuery(function ($) {
    $('form').validatr();
});
</script>

A questo punto non rimarrà che creare un comune form HTML facendo attenzione di utilizzare gli attributi HTML5 corretti (number nel nostro caso) e di introdurre la clausola required per la validazione:

<form action="./">
    <label for="number">Number</label>
    <div>
        <input type="number" id='number' step=2 min=1 max=11 name="number" required>
        <input type="submit" value="Submit">
    </div>
</form>

Da notare come attraverso gli argomenti passati all’interno del markup sia possibile non soltanto imporre che il parametro di input utilizzato sia un numero, ma anche definire all’interno di quale intervallo dovrà essere ricompresa tale cifra.

Via Validatr

Post correlati
I più letti del mese
Tematiche