jQuery Validate con array di input

In un precedente articolo ho mostrato come usare il plugin jQuery Validate per la validazione dei form.

Partendo da la vediamo come poter validare il form in caso che ci siano più input con lo stesso nome.

<form action="#" id="frm_email_amici" method="post">
    <dl>
        <dt><label for="emailam">Invita almeno tre amici per diventare Gold</label></dt><br/>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input type="text" name="emailam[]" value="" /></dd>
    </dl>
    <dl>
        <dd><input class="inviaeli" type="submit" value="Invia" name="btn_email_amici" /></dd>
    </dl>
</form>

Qua ci sono 5 input text che hanno lo stesso nome, e alla parte in PHP gliele passo come array.

Validazione form con jQuery Validate

In giro si trovano diversi plugin per jQuery per la validazione dei form.

Ho visto che molti siti usare il plugin Validate, e dopo averlo usato ho capito il perchè: molto facile da usare e da integrare.

L'unica cosa che richiede è jQuery e il JS per attivare il plugin:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

Cominciamo con un esempio base.

Questo è il form:

<form action="#" method="post" id="nwsl_form">

Nome: <input class="required" type="text" value="" name="nome" /><br/>

Cognome: <input class="required" type="text" value="" name="cgnome" /><br/>

Email: <input class="required email" type="text" value="" name="email" /><br/>

<input type="submit" name="btn_send" value="Subscribe" />

</form>

Il form ha tre campi, tutti sono obbligatori e la mail deve essere ben formata.

Per impostare queste opzioni ci basta mettere le classi (in questo caso required e email).

Poi per attivare il plugin sul form:

$(document).ready(function(){
   $("#nwsl_form").validate();

});

Basta indicare l'id del form da controllare.

Questo è l'esempio più banale, nel quale non abbiamo personalizzato nulla.

C'è un controllo sui campi, l'errore compare a destra e il messaggio è quello standard.

Andiamo a complicarci la vita.