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）
将剩余设置为其他输入字段的最大值（规则＆gt;收入＆gt; max：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 -->

这是我使用的javascript

$("#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/

Answer 3

我的带有动态字段的输入表单，

<div class="col-md-9">
    <input type="text" class="form-control"
        name="nominees[0].nomineeAmnt" id="nomineeAmnt1">
</div>

<div class="col-md-9">
    <input type="text" class="form-control"
        name="nominees[1].nomineeAmnt" id="nomineeAmnt2">
</div>

<div class="col-md-9">
    <input type="text" class="form-control"
        name="institutes[0].instituteAmnt" id="instituteAmnt1">
</div>

<div class="col-md-9">
    <input type="text" class="form-control"
        name="institutes[1].instituteAmnt" id="instituteAmnt2">
</div>

<div class="col-md-9 col-md-offset-3">
    <input type="hidden" class="form-control" name="totalPercent"
        id="totalPercent">
</div>

我们可以添加jQuery验证功能来计算ID以相同名称开头的字段的总百分比，

jQuery.validator.addMethod("totalPercent", function (value, element) {
    var total = 0;
    $("[id^=nomineeAmnt]").each(function(){
        if(parseInt($(this).val()) > 0){
            total += parseInt($(this).val());
        }
    });

    $("[id^=instituteAmnt]").each(function(){
        if(parseInt($(this).val()) > 0){
            total += parseInt($(this).val());
        }
    });

    return total === 100;
}, function(params, element) {
  return 'Total amount should be 100%.'
});

然后使用该功能

$("#nomineeForm").validate({
    ignore: [],
    rules:{
        totalPercent:{
            totalPercent: true
        }
    }
});

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

3 个答案: