jquery验证两个输入的总百分比不大于100％

Question

我不知道如何将验证规则设置为我的表单。我有两个字段用于输入表示百分比的数字，我想设置检查这两个字段的总数或总和是否不大于100的规则。

到目前为止，我添加了检查数字是否输入一个的字段不超过100，但这不是我最终的解决方案。我需要它禁止用户在两个字段100或90中输入示例，并且仅限于使总和等于100.例如，他可以在一个字段60和其他40中输入。

我有我的在的jsfiddle情况：http://jsfiddle.net/te956/1/

这里是HTML代码：

<form class="form-horizontal" id="whereEntry" method='post' action='/start/'> 
<fieldset> 

    <div class="control-group"> 
     <div class="controls controls-row"> 
       <input type="text" class="span2 register_input" id="income" name="income" placeholder="% of income"> 
     </div> 
    </div> 

    <div class="control-group"> 
     <div class="controls controls-row"> 
       <input type="text" class="span2 register_input" id="income_2" name="income_2" placeholder="% of income"> 
     </div> 
    </div> 

<div class="control-group"> 
    <label class="control-label" for="input01"></label> 
     <div class="controls text-center"> 
      <button type="submit" id="btn_next" class="btn btn-primary btn-large">Next</button> 
     </div> 
</div> 



    </fieldset> 
</form> 

和文字是这样的：

$(document).ready(function(){ 

$('#whereEntry').validate({ 
    rules: { 
    income: { 
     required: true, 
     number: true, 
     min: 0, 
     max: 100, 
     }, 
income_2: { 
    required: true, 
    number: true, 
    min: 0, 
    max: 100, 
     }  
}, 

    highlight: function(element) { 
    $(element).closest('.control-group').removeClass('success').addClass('error'); 
    }, 
     success: function(element) { 
    element 
    .text('OK!').addClass('valid') 
    .closest('.control-group').removeClass('error').addClass('success'); 
    }  
    }); 

}); // end document.ready 

如果可能，我将不胜感激更新我的jsfiddle：http://jsfiddle.net/te956/1/

Answer 1

输入一个值，输入字段的任何一个后，您可以：

• 检查物品的价值为（X）从总价值
• 。减去它（100％ - X）
• 设置其余为其他输入域的最大值（规则>收入>最大：X）

Answer 2

我意识到这是一个老问题，但我有同样的问题，海到处寻找有效的答案。我无法得到任何我看到的工作答案，所以我采用了不同的方式。这是我的解决方案。

<div class="col-lg-4"> 
     <div class="card-box clearfix parentDiv"> 
     <form id="liability-form" action="." method="post"> 
      <input type="hidden" name="action" value="update_liability"> 
      <input id="total-slide" type="hidden" name="total_slide" value=""> 
      <input id="percent100" type="hidden" name="percent_100" value="100"> 
      <div class="slider-container"> 
      <input id="slider9" class="slider-total" type="text" name="liability[9]" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="100" /> 
      <span id="9label" class="slider-name">Kevin Alley: <span id="9val">100</span>%</span> 
      </div> 
      <div class="slider-container"> 
      <input id="slider10" class="slider-total" type="text" name="liability[10]" data-slider-min="0" data-slider-max="100" data-slider-step="10" data-slider-value="0" /> 
      <span id="10label" class="slider-name">Briana Alley: <span id="10val">0</span>%</span> 
      </div> 
      <div class="errorTxt"></div> 
      <button type="submit" class="btn btn-gray pull-left m-t-30">Update Liabilities</button> 
     </form> 
     </div> 
    </div> 
    <!-- end col --> 

下面是我用

$("#slider9").slider(); 
$("#slider9").on("slide", function(slideEvt) { 
    $("#9val").text(slideEvt.value); 
    var total = 0; 
    $('.slider-container').each(function() { 
    var row = $(this).find("input[type=text]").val(); 
    //var row = $(this).val(); 
    total += parseFloat(row); 
    $("#total-slide").val(total); 
    }); 
    var total = 0; 

}); 
$("#slider10").slider(); 
$("#slider10").on("slide", function(slideEvt) { 
    $("#10val").text(slideEvt.value); 
    var total = 0; 
    $('.slider-container').each(function() { 
    var row = $(this).find("input[type=text]").val(); 
    //var row = $(this).val(); 
    total += parseFloat(row); 
    $("#total-slide").val(total); 
    }); 
    var total = 0; 
}); 

$("#liability-form").validate({ 
    ignore: [], 
    rules: { 
     total_slide: { 
      equalTo: '#percent100' 
     } 
    }, 
    messages:{ 
     total_slide:{ 
      equalTo: 'Liability for all users must equal 100%' 
     } 
    }, 
    errorElement : 'div', 
    errorLabelContainer: '.errorTxt' 
}); 

https://jsfiddle.net/kevin3954/x9q0456m/1/