jQuery Validation: validazione di un form con jQuery

Corso jQuery Creare applicazioni client-side col Framework jQuery

Il plug-in jQuery Validation consente di validare un form attraverso una nutrita schiera di funzioni di controllo, gestibili direttamente attraverso jQuery, by-passando completamente le classiche istruzioni condizionali e l'utilizzo delle funzioni per la gestione delle stringhe.

In questo articolo esamineremo tutti i sistemi di controllo che il jQuery Validate mette a disposizione degli sviluppatori, capiremo la sintassi per il suo impiego e faremo un esempio pratico.

Download del plug-in jQuery Validation

Il download del plug-in jQuery Validation è disponibile all'indirizzo:

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Cliccando su "Download" si scaricherà il file jquery.validate.zip che contiene, tra l'altro, degli esempi di utilizzo del plug-in stesso.

Ci interessa estrarre dall'archivio compresso il file jquery.validate.js che includeremo nella pagina in cui abbiamo il form da validare, subito dopo l'inclusione di jQuery:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

• accept - verifica che in un campo in cui si inserisce il nome ed il percorso di un file, l'stensione di un file sia presente tra quelle specificate, separandole col carattere pipe (|).
• creditcard - espressione regolare per il controllo di un numero di carta di credito.
• date - espressione per la verifica di una stringa in formato data.
• dateDE - verifica che una data sia in formato coerente con la data tedesca (il plug-in "proviene" dalla Germania).
• dateISO - verifica che il formato di una data rispetti gli standard ISO.
• digits - verifica che il contenuto di un campo sia un numero intero.
• email - espressione regolare per il controllo di un indirizzo email.
• equalTo - verifica che il valore di un campo sia uguale al valore specificato in un altro campo.
• max - verifica che un valore numerico immesso in un campo non sia maggiore di quello specificato.
• maxLength - accetta un valore numerico che specifica il massimo numero di caratteri che devono essere inseriti.
• min - verifica che un valore numerico immesso in un campo non sia minore di quello specificato.
• minLength - accetta un valore numerico che specifica il minimo numero di caratteri che devono essere inseriti.
• number - booleano, verifica che il contenuto di un campo sia numerico; accetta il punto (.) come separatore dei decimali.
• numberDE - booleano, verifica che il contenuto di un campo sia numerico; accetta la virgola (,) come separatore dei decimali.
• range - controlla che il valore .
• rangeLength - verifica che il numero di caratteri inseriti in un campo siano compresi tra quello minimo e quello massimo specificato.
• remote - accetta la URL di uno script lato server esterno (ASP, PHP etc...) che effettui il controllo.
• required - booleano, accetta "true" o "false" a seconda che il campo sia richiesto o meno.
• url - espressione regolare per il controllo di una URL.

rules:
{
    campo_uno: "nome_singolo_controllo",
    campo_due:
    {
        primo_controllo: valore,
        secondo_controllo: valore
    }
},
message:
{
    campo_uno: "Inserisci il valore del campo 1",
    campo_due:
    {
        primo_controllo: "Rispetta il primo controllo",
        secondo_controllo: "Rispetta il secondo controllo"
    }
}

<form id="modulo" method="post" action="script.asp">
<div>
    <span>Nome</span><br>
    <input type="text" id="nome" name="nome">
</div>
<div>
    <span>Cognome</span><br>
    <input type="text" id="cognome" name="cognome">
</div>
<div>
    <span>Nickname</span><br>
    <input type="text" id="nickname" name="nickname">
</div>
<div>
    <span>Password</span><br>
    <input type="password" id="password" name="password">
</div>
<div>
    <span>Conferma la password</span><br>
    <input type="password" id="conferma" name="conferma">
</div>
<div>
    <span>Email</span><br>
    <input type="text" id="email" name="email">
</div>
<div>
    <span>Accetti i trrmini del servizio?</span><br>
    <input type="checkbox" id="accetto" name="accetto">
</div>
<input type="submit" value="   Invia i dati   ">
</form>

body
{
    background: #FFFFFF;
    color: #000000;
    margin: 10px 10px 10px 10px;
}
div, input
{
    font-size: 13px;
    font-family: verdana;
}
form div
{
    color: #FF0000;
    margin: 0px 0px 10px 0px;
}
form div span
{
    color: #000000;
}

• nome - richiesta la sola compilazione.
• cognome - richiesta la sola compilazione.
• nickname - richiesta la sola compilazione.
• password - richiesta la sola compilazione.
• conferma - verifica che il valore sia uguale a quello della pasword scelta.
• email - verifica che l'email sia nella sua espressione regolare.
• accetto - verifica che il checkbox venga spuntato.

$(document).ready(function()
{
    $("#modulo").validate(
    {
        rules:
        {
            nome: "required",
            cognome: "required",
            nickname: "required",
            password: "required",
            conferma:
            {
                required: true,
                equalTo: "#password"
            },
            email:
            {
                required: true,
                email: true
            },
            accetto: "required"
        },
        messages:
        {
            nome: " Inserisci il tuo nome!",
            cognome: " Inserisci il tuo cognome!",
            nickname: " Scegli un nickname!",
            password: " Scegli una password!",
            conferma: " La conferma non corrisponde alla scelta della password!",
            email: " Inserisci un indirizzo email valido!",
            accetto: "Non hai accettato i termini del servizio!"
        }
    });
});

• nome - specificare un minimo ed un massimo di caratteri digitabili.
• cognome - specificare un minimo ed un massimo di caratteri digitabili.
• nickname - specificare un minimo ed un massimo di caratteri digitabili.
• password - specificare un minimo ed un massimo di caratteri digitabili.
• email - specificare un minimo ed un massimo di caratteri digitabili.

TAGS - jquery, jquery validation