jQuery 동적 백분율 필드 유효성 검사

Question

jQuery 유효성 검사 플러그인을 사용하고 있습니다. 모든 입력 필드의 합계를 .percent 클래스를 사용하여 계산하려고합니다. .percent 필드의 합계가 100 %가 아닌 경우 유효성 검사 오류가 발생합니다.

퍼센트 행은 동적 그리드의 일부이며 매우 숫자가 있습니다. 제가 아래에서 일해 온 것의 샘플을 보게 될 것입니다. addMethod가 한 번이 아닌 모든 input.percent에 호출된다는 것을 알았습니다. 제출이 호출되기 전에 호출되고 있다고 말하고 싶습니다.

코드입니다.

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

}); 

업데이트

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

이

는 단지입니다 우선권 추가 백분율 필드를 쿼리 할 수없는 단일 요소에서 노래하십시오. 다른 문제는 첫 번째 .percent 요소에만 오류 클래스를 추가하고 100 % 조건이 충족되면 추가 요소가 오류를 해제하지 않는다는 것입니다.

업데이트 2

이것은 유효성 검사 작업을 얻는 데 가장 근접한 것입니다. 규칙을 반복 할 때마다 모든 백분율 필드를 반복해야하므로 매우 효율적인 코드는 아닙니다. 코드는 여전히 %가 같은 간단한 확인을 위해 jQuery를 사용하지 마십시오 동일한 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

에 수정되었습니다 때 제출 작업이 발생한 플러스의 keyup에있는 모든 %의 오류를 지우지 않습니다하기 전에 유효성을 검사합니다. jquery에 대한 모든 과장된 점을 정말로 이해하지 못합니다. 단지 코드가 모두보기 흉하게 보입니다.

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