0

我不知道如何为我的表单设置验证规则。我有两个字段用于输入代表百分比的数字，我想设置检查这两个字段的总和是否不大于 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/

4

3 回答 3

1

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

  • 检查值是什么（X）
  • 从总值中减去 (100% - X)
  • 将剩余部分设置为其他输入字段的最大值（规则 > 收入 > 最大值：X）
于 2013-06-05T13:05:18.370 回答
0

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

<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
        }
    }
});
于 2019-02-22T05:21:55.237 回答
0

我意识到这是一个较老的问题，但我遇到了同样的问题，并到处寻找有效的答案。我无法得到我看到的任何答案，所以我以不同的方式去做。这是我的解决方案。

 <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/

于 2016-12-31T02:37:25.007 回答