jQuery convalida l'array di input dinamico

Question

Come convalidare uno quando questo è un array dinamico? Come questo:

<select class="escolhaVidro id_material" name="id_material[]" id="id_material"> 

per chiarire: Questo <select> assemblato dinamicamente da PHP, in modo da non so quali sono gli indici, così in questo modo non è possibile:

$(this).validate({ 
    rules: { 
     "id_material[index]" : { 
      required : true 
     } 
    } 
}); 

E così stranamente questo plugin fa non funziona:

$(this).validate({ 
    rules: { 
     id_material : { 
      required : true 
     } 
    } 
}); 

ho anche provato ad utilizzare un CSS classrequired in <select>, ma non va bene.

Answer 1

Citazione OP: "E così strano questo plugin non funziona:
$(this).validate({ ... });"

Non è strano. Non funziona perché non hai davvero preso di mira nulla. Non c'è alcun contesto o ambito per $(this) per avere alcun significato.

Devi correttamente indirizzare il vostro <form> elemento:

per esempio, da id ...

$('#myform').validate({ ... }); 

... o any other valid jQuery selector che ha come bersaglio l'attuale <form></form> che vuoi validare.

---

Ecco un esempio generico di come convalidare un elemento select che si può adattare facilmente nella vostra situazione:

http://jsfiddle.net/Gy24q/

Importante, il primo, o il default option nell'elemento selectdeve contenere value="" o required ru le fallirà. Se, per qualsiasi motivo, non è possibile impostare questo primo option 's value uguale a "", quindi see this answer's soluzione del metodo personalizzato e jsFiddle.

HTML:

<form id="myform"> 
    <select name="id_material[]"> 
     <option value="">please choose...</option> 
     <option>option 1</option> 
     <option>option 2</option> 
     <option>option 3</option> 
    </select> 
    .... 
</form> 

Dal momento che il name contiene parentesi, [], you also must enclose your field name in quotes:

jQuery:

$(document).ready(function() { 

    $('#myform').validate({ // initialize plugin within DOM ready 
     // other options, 
     rules: { 
      'id_material[]': { 
       required: true 
      } 
     }, 
    }); 

}); 

---

La risposta sopra riportata presuppone la conoscenza dello name dell'elemento select. Tuttavia, se non si conosce il name, avete un paio di opzioni ...

1) Utilizzare class="required" all'interno dell'elemento select ...

<select class="escolhaVidro id_material required" name="id_material[]" id="id_material"> 

Demo: http://jsfiddle.net/Gy24q/4/

2) Se le regole sono più complesse, è possibile aggiungere il composto rules in base alloesistente.assegnazioni usando the rules('add') method.

utilizzare jQuery .each() se si dispone di più di un select elemento che ha bisogno di questa regola ...

// must be called after validate() 
$('select.id_material').each(function() { 
    $(this).rules('add', { 
     required: true 
    }); 
}); 

Demo: http://jsfiddle.net/Gy24q/10/

In caso contrario, questa si applica la regola per solo unoselect elemento con classid_material ...

$('select.id_material').rules('add', { 
    required: true 
}); 

---

EDIT:

preventivo OP nei commenti:

All'interno della funzione seguente convalida viene eseguita: $('#formOrcamento').live('submit', function() {...}); Poi $(this).validate({...}); riferisce a: $('#formOrcamento').validate ({...});

stessa:

$('#formOrcamento').live('submit', function() { 
    $(this).validate({ ... }); 
}); 

Sì, questo è esattamente il motivo per cui è rotto.

.validate() ottiene solo chiamato volta sul DOM pronto a inizializzare il plugin. Non dovresti metterlo in un gestore submit.Il plug-in Validate ha già il proprio gestore di eventi integrato che cattura il pulsante di invio del modulo.

Imposta il tuo codice come da mio demo di lavoro jsFiddle sopra.

---

EDIT 2:

Citazione OP nei commenti:

sto usando jquery-ui e questo aggiunge al selezionare la seguente: style='display: none'. Se rimuovo tramite Firebug il display: none, , selezionare la convalida e visualizzare correttamente l'errore dell'etichetta. Cosa potrebbe accadere?

Il plug-in Validate ignora gli elementi nascosti per impostazione predefinita. Avrai bisogno di trasformare l'opzione off con l'aggiunta di ignore: []-validate():

$(document).ready(function() { 

    $('#myform').validate({ 
     ignore: [], // to allow validation of hidden elements 
     // other options, 
    }); 

}); 

Vedi this answer per ulteriori informazioni.

Answer 2

Basta usare staffe emtpy e assicurarsi che il nome compreso tra parentesi è tra virgolette (vedi documentation):

$(this).validate({ 
    rules: { 
     "id_material[]" : { 
      required : true 
     } 
    } 
});