jquery bootstrap Validation：多个输入值的总和，如果不等于其他输入字段，则禁用提交按钮

Posted 2023-05-08

【中文标题】jquery bootstrap Validation：多个输入值的总和，如果不等于其他输入字段，则禁用提交按钮

【英文标题】：jquery bootstrapValidator : sum of multiple input values and if not equal other input fileds disable submit button

【发布时间】：2020-03-20 12:12:41

【问题描述】：

我有两个输入字段类别。 div 类 total_investement_expenses 类有 4 个输入字段。每个都有一个类 pr，第二个 div 类 source_income 有两个输入字段，每个都有一个名为 prc 的类名。

 $('.source').on('input','.prc',function()
            totalSum=0;
            $('.source .prc').each(function()
                var inputVal = $(this).val();
                if($.isNumeric(inputVal)) 
                    totalSum += parseFloat(inputVal);
                
            )
            $('#sourceSum').text(totalSum);
        );
        // console.log(totalSum+" self_inital and loan values");
        $('.expense').on('input','.pr',function()
            var totalExpense=0;
            $('.expense .pr').each(function()
                var inputVal = $(this).val();
                if($.isNumeric(inputVal)) 
                    totalExpense += parseFloat(inputVal);
                
            )
            $('#totalExpense').text(totalExpense);
        );
 $('form[data-toggle="validator"]').bootstrapValidator();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<div class="total_investement_expenses">

  <div class="form-group expense">

    <label for="land_expenses">Land Expenses</label><input type="text" name="land_expenses" value=""  class="form-control pr" id="land_expenses" required="required" placeholder=""  />

  </div>

  <div class="form-group expense">
   <label for="equipment_machinery">Equipment Machinery</label>           <input type="text" name="equipment_machinery" value=""  class="form-control pr" id="equipment_machinery" required="required" placeholder=""  />

 </div>

 <div class="form-group expense">
   <label for="asset_capital">Asset Capital</label>           <input type="text" name="asset_capital" value=""  class="form-control pr" id="asset_capital" required="required" placeholder=""  />

 </div>
 <div class="form-group expense">
  <label for="working_capital">Working Capital</label>        <input type="text" name="working_capital" value=""  class="form-control pr" id="working_capital" required="required" placeholder=""  />

</div>
<div class="form-group">
  <label>Total</label> <span id="totalExpense"></span>

</div>

</div>

<div class="source_income" >

  <div class="form-group source">
   <label for="self_inital">Own Equity</label>
   <input type="text" name="self_inital" value=""  class="form-control prc" id="self_inital" placeholder="" required="required"  />
 </div>

 <div class="form-group source">
   <label for="loan">Loan</label>       <input type="text" name="loan" value=""  class="form-control prc" id="loan" placeholder=""  />

 </div>
 <div class="form-group">
  <label>Total:</label> <span id="sourceSum">  </span>
</div>

</div>

我可以看到两个输入字段类的总和，但我的问题是如果不等于我想使用回调禁用提交按钮。

【参考方案1】：

我不确定我是否正确理解了您的问题。但是，我已经为您准备了一个示例 sn-p，以防万一我的假设是正确的。好吧，您必须将总变量移出事件范围，并在这些事件发生后执行简单的检查。喜欢：

let totalSum = 0;
let totalExpense = 0;
$('.source').on('input', '.prc', function() 
  totalSum = 0;
  $('.source .prc').each(function() 
    var inputVal = $(this).val();
    if ($.isNumeric(inputVal)) 
      totalSum += parseFloat(inputVal);
    
  )
  $('#sourceSum').text(totalSum);
  checkSubmitBtn();
);
// console.log(totalSum+" self_inital and loan values");
$('.expense').on('input', '.pr', function() 
  totalExpense = 0;
  $('.expense .pr').each(function() 
    var inputVal = $(this).val();
    if ($.isNumeric(inputVal)) 
      totalExpense += parseFloat(inputVal);
    
  )
  $('#totalExpense').text(totalExpense);
  checkSubmitBtn();
);
//$('form[data-toggle="validator"]').bootstrapValidator();
checkSubmitBtn();


function checkSubmitBtn() 
  $('#submitBtn').prop('disabled', totalExpense != totalSum || (totalSum == 0 || totalExpense == 0));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</div>
<div class="form-group expense">
  <label for="working_capital">Working Capital</label> <input type="text" name="working_capital" value="" class="form-control pr" id="working_capital" required="required" placeholder="" />

</div>
<div class="form-group">
  <label>Total</label> <span id="totalExpense"></span>

</div>

</div>

<div class="source_income">

  <div class="form-group source">
    <label for="self_inital">Own Equity</label>
    <input type="text" name="self_inital" value="" class="form-control prc" id="self_inital" placeholder="" required="required" />
  </div>

  <div class="form-group source">
    <label for="loan">Loan</label> <input type="text" name="loan" value="" class="form-control prc" id="loan" placeholder="" />

  </div>
  <div class="form-group">
    <label>Total:</label> <span id="sourceSum">  </span>
  </div>

  <input type='button' value='Submit' id='submitBtn' />

</div>

【讨论】：

它在独立模式下完美运行，因为我使用的是 bootstrapValidator，它不能像你预期的那样工作，它可以帮助我集成 bootstrapValidator，如果可能的话，我想将贷款计算为 totalExpense- self_inital 也是如此

据我了解，引导验证器与您的方案无关。您能否提供有关您的问题的更多信息？使用我的代码无法使用哪些特定功能？

我可以提交，即使值不一样。我开始从上到下填充它检查应该是的值。但如果我更改 captial 或 assets 的值，按钮仍然可见。

好吧，我猜，在这种情况下，您必须在每个需要的事件之后添加checkSubmitBtn() 函数调用？您尝试过这种方式吗？