jQuery validar campo de porcentaje dinámico

Question

Estoy usando el complemento de validación de jQuery. Estoy tratando de calcular la suma de todos los campos de entrada usando la clase .percent. Si la suma de los campos .percent no es igual al 100%, arroje un error de validación.

Las filas porcentuales forman parte de una cuadrícula dinámica y pueden ser muy numerosas. Verá una muestra de lo que he estado trabajando a continuación. Estoy descubriendo que se llama addMethod para cada input.percent en lugar de una sola vez. También me gustaría decir que se llama antes de que se envíe el envío.

el código.

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({ 

}); 

Actualizaciones

que he probado el siguiente código con éxito menor

$("#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%") 
); 

al pasar la clase en reglas que es sólo pas cantar en un solo elemento que no me permite consultar los campos de porcentaje adicionales. El otro problema es que solo agrega la clase de error al primer elemento .percent y los elementos adicionales no liberarán el error una vez que se hayan cumplido los criterios del 100%.

Actualización 2

Esto es lo más cerca que he llegado a conseguir trabajo de validación por ciento. No es un código muy eficiente ya que necesita recorrer todos los campos de porcentaje cada vez que se repiten las reglas. El código todavía valida antes ha tomado una acción de envío lugar además no borrar todos los errores por ciento en keyup cuando el porcentaje se ha corregido a la igualdad 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

No utilizar jQuery para una validación tan simple. Realmente no entiendo lo que todo el bombo es sobre jquery. Solo hace que tu código se vea feo.

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; 
    }