jquery проверяет общий процент двух входов не более 100%

Я не знаю, как установить правило проверки для моей формы. У меня есть два поля для ввода чисел, которые представляют проценты, и я хочу установить правило, которое проверяет, не превышает ли общее количество или сумма этих двух полей 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/

dzordz 05.06.2013 источник

Ответы (3)

arrow_upward
1
arrow_downward

После ввода значения в одно из полей ввода вы можете:

проверить, какое значение было (X)
вычесть его из общего значения (100% - X)
установите оставшееся как максимальное значение для другого поля ввода (правила> доход> макс: X)

mMoovs 05.06.2013

comment

не могли бы вы отредактировать мой jsfiddle и разветвить его? я новичок в проверке .. :) - dzordz; 05.06.2013

comment

Я бы не стал давать вам готовый ответ, поэтому я описал только возможное решение :) Я тоже раньше не использовал валидацию, но похоже, что есть хорошая документация по ней. Вот небольшой совет: jqueryvalidation.org/rules - mMoovs; 05.06.2013

comment

да, я уже читаю это, пока мы говорим, и пытаюсь решить, но, может быть, кто-нибудь даст мне быстрый ответ по моей ситуации :) - dzordz; 05.06.2013

arrow_upward
0
arrow_downward

Я понимаю, что это старый вопрос, но у меня была та же проблема, и я везде искал правильный ответ. Я не смог получить никакого ответа, который я видел работающим, поэтому я пошел по другому пути. Вот мое решение этого.

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

kevin3954 31.12.2016

arrow_upward
0
arrow_downward

Моя форма ввода с динамическими полями,

<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 для расчета общего процента для полей, имеющих идентификатор, начинающийся с одного и того же имени,

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

Vrajpal Jhala 22.02.2019

jquery проверяет общий процент двух входов не более 100%

Ответы (3)

Похожие вопросы