Blog2j
 
Cerca con Google
Ricerca personalizzata
 
Validazione client con jquery
13/09/2008 16:03     Categorie: javascript jquery tutorial
Dopo aver visto come aggiungere una validazione javascript ad una form esistente utilizzando extjs vediamo adesso come eseguire la stessa operazione usando jquery, un framework javascript molto semplice ma anche molto potente. In particolare sfrutteremo alcune funzionalità base di jquery di selezione/manipolazione del dom della pagina ed alcuni plugin. In questo post vedremo che jquery è il framework ideale da usare quando si vuole aggiungere funzionalità ai vari elementi di una pagina in base alle classi css associate.
L'esempio è costituito da una form con alcuni campi di input ed è molto simile a quello visto in precedenza:

Il codice per creare questa form è un html standard molto semplice, da notare che tutti i campi di input hanno delle classi css che indicano il tipo di validazione che deve essere effettuata sui dai inseriti (per esempio required, date, number):
<html>
<head>
    <title>Esempio validazione</title>
</head>
<body>
<form action="salva.html" id="normalForm" class="cmxform">
    <fieldset>
    <legend>Inserimento dati</legend>
        <p>
            <label for="nome">Nome</label>
            <input type="text" id="nome" name="nome" minlength="3"
                maxlength="20" class="required valida-nome">
        </p>
        <p>
            <label for="cognome">Cognome</label>
            <input type="text" id="cognome" name="cognome" class="required">
        </p>
        <p>
            <label for="email">Email</label>
            <input type="text" id="email" name="email" class="email">
        </p>
        <p>
            <label for="dataDiNascita">Data di nascita</label>
            <input type="text" id="dataDiNascita" name="dataDiNascita"
                class="date e-min-value-01-01-1900">
        </p>
        <p>
            <label for="indirizzo">Indirizzo</label>
            <input type="text" id="indirizzo" name="indirizzo">
        </p>
        <p>
            <label for="cap">Cap</label>
            <input type="text" id="cap" name="cap" minlength="5"
                maxlength="5" class="number">
        </p>
        <p>
            <label for="provincia">Provincia</label>
            <select id="provincia" name="provincia"
                    class="autocomplete remove-first-line">
                <option>[Seleziona]</option>
                <option value="AG">Agrigento</option>
                <option value="AL">Alessandria</option>
                ...
                <option value="VT">Viterbo</option>
            </select>
        </p>
        <p>
            <label for="note">Note</label>
            <textarea id="note" name="note" rows="10" cols="50"></textarea>
        </p>
        <p>
            <input type="submit" value="Inserisci">
        </p>
    </fieldset>
</form>
</body>
</html>
Per prima cosa rendiamo la form un po' più curata dal punto di vista grafico sfruttando alcuni consigli contenuti in questo articolo. In pratica aggiungiamo due javascript (jquery e cmxforms) e un po' di css senza modificare niente nella form:
    <script type="text/javascript" src="http://cachefile.net/scripts/jquery/1.2.6/jquery-1.2.6.pack.js"></script>
   
    <link rel="stylesheet" href="css/cmxform.css" type="text/css">
    <script type="text/javascript" src="js/cmxforms.js"></script>

    <style>
    body {
        font-family:arial,helvetica,clean,sans-serif;
        font-size:small;
        font-size-adjust:none;
        font-stretch:normal;
        font-style:normal;
        font-variant:normal;
        font-weight:normal;
        line-height:normal;
    }
    form.cmxform label {
        width:150px;
    }
    form.cmxform label.error{
        margin-left:15px;
    }
    form.cmxform fieldset p {
        margin:0;
    }
    </style>
La form dopo il restyling è diventata questa:
A questo punto aggiungiamo alcuni plugin di jquery per inserire la validazione della form:
<link rel="stylesheet" href="css/ui.datepicker.css" type="text/css" />
<script type="text/javascript" src="js/jquery-ui-personalized-1.5.2.min.js"></script>
<script type="text/javascript" src="js/ui.datepicker-it.js"></script>
   
<script type="text/javascript" src="js/jquery.numeric.js"></script>
   
<script type="text/javascript" src="js/jquery.validate.pack.js"></script>
   
<script type="text/javascript" src="js/jquery.form.js"></script>
   
<link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
   
<script src="jqueryValidationBlog2j.js"></script>
L'ultimo javascript inserito contiene il codice javascript che aggiunge la validazione lato client sfruttando i plugin di jquery inseriti, in pratica con la function $ di jquery si selezionano alcuni elementi della pagina a cui poi vengono aggiunte funzionalità. Per esempio il comando $('input.number') seleziona tutti gli elementi html di tipo input all'interno della pagina che hanno la classe css number. Il codice completo è il seguente:
blog2j = {
    addJQueryValidation : function(formId) {
        //aggiungo il calendario ai campi data
        $('input.date').datepicker( {
            dateFormat :'dd/mm/yy'
        });

        //aggiungo il controllo per poter inserire solo numeri
        $('input.number').numeric();

        //sostituisco i combo box con campi con autocompletamento
        $('select.autocomplete').each( function(pos, c) {
            c = $(c);
            //leggo i dati contenuti nel combo box
            var data = [];
            c.children().each( function(p, v) {
                if (p != 0 || !c.hasClass('remove-first-line')) {
                    data.push($(v).text());
                }
            });
            //inserisco il campo con autocompletamento
            $('<input>').insertAfter(c).autocomplete(data, {
                mustMatch :true,
                autoFill :true
            });
            //rimuovo il combo box
            c.remove();
        });

        //applico la validazione ai campi in base alle classi css
        $('#' + formId).validate( {
            focusout :true,
            submitHandler : function(form) {
                //se tutti i campi sono validi eseguo una chiamata ajax per
                //postare i valori della form
                $(form).ajaxSubmit( {
                    success : function(responseText) {
                        alert(responseText)
                    }
                });
                return false;
            }
        });
    }
};

$(document).ready( function() {
    //aggiungo un criterio di validazione (se un campo contiene
    //la classe valida-nome deve cominciare per lettera maiuscola
    $.validator.addMethod('valida-nome', function validaNome(n) {
        if (n && (n.charAt(0) < 'A' || n.charAt(0) > 'Z')) {
            return false;
        }
        return true;
    }, 'Il nome deve iniziare per lettera maiuscola.');
    blog2j.addJQueryValidation('normalForm');
});
Il risultato finale è questo:

In questo esempio sono stati usati i seguenti plugin:
  • ui-datePicker: calendario usato nei campi che contengono una data
  • autocomplete: componente con autocompletamento usato al posto dei combo box
  • validation: plugin che permette di aggiungere validazione ai campi in base alle classi css associate ai campi
  • form: plugin per eseguire facilmente una chiamata ajax al posto di una chiamata standard al momento del submit di una form
  • numeric: applicato a un campo di testo permette l'inserimento da parte dell'utente solo di numeri
  
News