jQuery验证两个输入的总百分比范围不大于100％ [英] jquery validate total percentange of two inputs not greater than 100%

问题描述

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

I'm out of idea how to set validation rule to my form. I have two fields for input of numbers which represent percentage and I wanna to set the rule which checks if total or sum of this two field is not greater than 100.

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

So far i added rule that checks if number entered in one of the fields isn't greater than 100 but that's not my final solution. I need it to forbid user for entering in example in both fields 100, or 90 and limit only so the total sum is equal to 100. for example he can input in one field 60 and in other 40.

我在jsfiddle中遇到的情况: http://jsfiddle.net/te956/1/

I have my situation in 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/

I would be grateful if you could update my jsfiddle: http://jsfiddle.net/te956/1/

推荐答案

在任一输入字段中输入值之后，您可以:

After entering a value to either one of the input fields, you could:

• 检查值是(X)
• 从总价值(100％-X)中减去它
• 将其余值设置为其他输入字段的最大值(规则>收入>最大值:X)

这篇关于jQuery验证两个输入的总百分比范围不大于100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！