使用 jquery validate 的几个输入的最小集合值答案

【问题标题】：Minimum collective value of several inputs with jquery validate使用 jquery validate 的几个输入的最小集合值
【发布时间】：2019-09-10 08:42:47
【问题描述】：

我有几个具有相同名称的文本输入，如果所有输入的总和小于 1，我会尝试阻止表单提交。例如用户不能在所有输入上都输入 0，但必须至少在其中一个上输入 1，这样所有输入的总和至少为 1。

我在 jquery validate 中创建了一个方法来检查所选输入的值是否大于 0

<td><input class='{nbTeams: true} nbTeamsVal' type="text" class="form-control" id="nbTeamsMiniSoccer_20" name="nbTeams[]"></td>
<td><input class='{nbTeams: true} nbTeamsVal' type="text" class="form-control" id="nbTeamsYouthMale_20" name="nbTeams[]"></td>

这是方法：

$.validator.addMethod("nbTeams", function(value, elem, param) {
  return $(".nbTeamsVal").value > 0;
  },"Collective value must be more than 1!"
);

这是我的规则和自定义消息

$(document).ready(function () {

  $('#myForm').validate({
      rules: {
          "nbTeams[]":{
            required: true
          }
      },
      messages: {
        "nbTeams[]":"This group of fields can only contain numbers and one must contain a value of at least 1."
      },
      errorElement : 'div',
      errorLabelContainer: '.errorTxt',
      submitHandler: function (form) { 
        form.submit();
      }
  });

});

【问题讨论】：

标签： javascript jquery validation

【解决方案1】：

我编辑你的代码试试这个：

$.validator.addMethod("nbTeams", function(value, elem) {
   var sumOfVals = 0;
   $(".nbTeamsVal").each(function () {
            sumOfVals = sumOfVals + parseInt($(this).val());
        });
        return sumOfVals>0;
  },"Collective value must be more than 1!"
);

 $('#myForm').validate({
      rules: {
          "nbTeams[]":"nbTeams"
      },
     
      errorElement : 'div',
      errorLabelContainer: '.errorTxt',
      submitHandler: function (form) { 
           alert('valid form submitted'); // for demo
            return false; // for demo
      }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>



<form id="myForm" method="post" action="#">
   
  <td><input class='{nbTeams: true} nbTeamsVal' type="text" class="form-control" id="nbTeamsMiniSoccer_20" name="nbTeams[]" value="0"></td>
<td><input class='{nbTeams: true} nbTeamsVal' type="text" class="form-control" id="nbTeamsYouthMale_20" name="nbTeams[]" value="0"></td>
 <div class="errorTxt"></div>
 <button type="submit">Submit</button>
</form>

【讨论】：