jQuery Convalida non valuta tutti i campi

Question

Sto lavorando a un nuovo layout per una pagina che è un sistema di ordinamento basato su procedura guidata per un client. Ordinano insiemi di materiali ma questi materiali possono essere raggruppati durante il processo d'ordine in modo che possano ordinare 10 widget in qualsiasi combinazione di rosso, blu e/o verde, ad esempio. La somma totale dei campi non può superare il massimo pre-calcolato. La maggior parte dei materiali è una semplice scelta singola per gruppo.

Ho usato jQuery in altre pagine e ho utilizzato il metodo addClassRules per convalidare tutti gli elementi di input sulla pagina e ha funzionato bene. L'esempio corrente su cui sto lavorando mi lascia sconcertato perché coglie solo il primo errore di convalida al momento dell'invio del modulo, ma dopo l'invio di solito ne cattura altri, ma mai l'elenco completo degli errori di convalida.

Ecco il mio campione jsfiddle modo da poter vedere quello che sto mettendo insieme: http://jsfiddle.net/brianmat/2nV5u/

Io uso un frammento di conteggio errore che ha lavorato su diversi siti senza un problema. In questo esempio ricevo solo 1 errore anche se tutte e 7 le caselle di testo sono state lasciate vuote.

La mia unica differenza principale qui è che sto facendo un rowspan per raggruppare i miei articoli, ma non riesco a vedere dove sarebbe un problema. So che questo finirà per essere qualcosa di abbastanza semplice, ma a questo punto sto solo colpendo un muro.

Il jQuery convalidare codice è niente di speciale:

$.validator.addClassRules({ 
    NumericInput: { 
     required: true 
    } 
}); 

$("#theForm").validate({ 
    invalidHandler: function(e, validator) { 
     var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields. They have been highlighted below'; 
      $("div.error span").html(message); 
      $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     } 
    }, 
    errorPlacement: function(error, element) {}, 
    submitHandler: function(form) { 
     $("div.error").hide(); 
     form.submit(); 
    } 
}); 

Il codice rimanente gestisce semplicemente il subtotale e immissione di dati numerici solo.

Sono completamente aperto a un approccio diverso alla gestione di questo problema, quindi rottamare il mio codice corrente e trovare qualcosa che funzioni correttamente non è un problema. Preferirei non provare a inserire un piolo quadrato in un buco rotondo se è quello che sto facendo alla fine.

Answer 1

Non dimentichiamo che fastidioso name attributo:

<input id="Text1" name="Text1" type="text" class="NumericInput group1" materialgroup="1" /> 
<!--    ^^ --> 

Aggiornato esempio:http://jsfiddle.net/2nV5u/6/

Inoltre, è possibile utilizzare data-* attributi invece di aggiungere i propri attributi di elementi (cioè data-materialgroup invece di materialgroup).