jQuery validate dynamic percentage field

Question

Sto usando il plugin jQuery validate. Sto cercando di calcolare la somma di tutti i campi di input usando la classe .percent. Se la somma dei campi .percent non è uguale a 100%, genera un errore di convalida.

Le righe percentuali fanno parte di una griglia dinamica e possono essere molto numerose. Vedrai un esempio di ciò su cui ho lavorato di seguito. Sto trovando che il metodo addMethod viene chiamato per ogni input.percent piuttosto che una singola volta. Vorrei anche dire che viene chiamato prima che venga chiamato submit.

il codice.

html

<div class="row"> 
    <input value="" class="percent"/> 
</div> 
<div class="row"> 
    <input value="" class="percent"/> 
</div> 

js

$.validator.addClassRules({ 
    percent: {percent:true} 
}); 

$.validator.addMethod("percent", 
    function cals(value, element) { 
     // all the fields that start with 'coeff' 
     var percent = element; 
     var total = 0; 
     for (var i = 0; i < percent.length; i++) { 
      total += Number(percent[i].value); 
     } 
    return total == 100; 
}, $.format("Percentage fields most total up to 100%")); 

$("form").validate({ 

}); 

Aggiornamenti

che ho provato il seguente codice con successo minore

$("#modify-funding .percent").rules('add', {sum: 100}); 

$.validator.addMethod("sum", function (value, element, params) { 
     var sumOfVals = 0; 

     $("#modify-funding .percent").each(function() { 
      sumOfVals = sumOfVals + parseInt($(this).val().length ? $(this).val() : 0); 
     }); 
     if (sumOfVals == params) return true; 
     return false; 
    }, 
    $.format("Percentage fields most total up to 100%") 
); 

quando passa la classe in regole è solo pas canta in un singolo elemento che non mi consente di interrogare per i campi percentuali aggiuntivi. L'altro problema è che aggiunge solo la classe di errore al primo elemento .percent e gli elementi aggiuntivi non rilasceranno l'errore una volta soddisfatti i criteri del 100%.

Update 2

Questo è il più vicino Sono venuto a ottenere lavoro convalida per cento. Non è un codice molto efficiente poiché è necessario eseguire il ciclo di tutti i campi di percentuale ogni volta che si eseguono il ciclo delle regole. Il codice di convalida ancora prima di presentare un'azione ha avuto luogo oltre a non cancellare tutti gli errori per cento sul keyup quando la percentuale è stata corretta a parità di 100.

$("#modify-funding .percent").each(function() { 
    $(this).rules('add', {sum: [".percent"]}); 
}) 

$.validator.addMethod("sum", function (value, element, params) { 
    var sumOfVals = 0; 
     $(params[0]).each(function() { 
      sumOfVals += parseFloat($(this).val().length ? $(this).val() : 0); 
     }); 

     if (sumOfVals == 100) return true; 
     return false; 
    }, 
    $.format("Percentage fields most total up to 100%") 
); 

Answer 1

Non utilizzare jQuery per un semplice convalida tale. Non capisco davvero che cosa sia l'hype su jquery. Rende solo il tuo codice brutto.

function validate() { 
     var ret = false; 
     var total = 0; 
     var elems = document.getElementsByTagName('*'), i; 
     for (i in elems) 
      if (elems[i].className == "percent") 
       total += parseFloat(elems[i].value); 
     if (total == 100) 
      ret = true; 
     return ret; 
    }