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.

Come validare tutte queste input con il plugin jQuery Validate?

Così:

$("#frm_email_amici").validate({
        submitHandler: function(form) {
            form.submit();
        }
    });  
    
    $("#frm_email_amici input[name='emailam[]']").each(function() {
        $(this).rules("add", {
            email: true
        });
    });

Prima intercettiamo il submit sul form.

Poi cicliamo su tutti gli elementi che hanno lo stesso nome e gli aggiungiamo le regole che vogliamo.

In questo caso nessuna input è obbligatoria, ma se ci scrivi dentro devi mettere una mail in formato valido.