Question

我正在尝试验证我的产品表单，基本上在每个字段集中有7个输入，这些只能验证它们是否总和为7.我只能在一个字段集中工作，但是当有多个字段集时在页面上我不知道如何让它工作。任何帮助都非常感谢，因为我是新手。

HTML：

 <form class="table">
      <fieldset>

        <table width="100%" border="0" style="margin-right:10%;">
          <tr valign="top">
            <td >
              <table cellpadding="3">
                <tr>
                  <td>Answer 1</td>
                  <td><input type="number" id="meals_1" name="meals_1" value="" max="7" /></td>
                </tr>
                <tr>
                  <td>Answer 2</td>
                  <td><input type="number" id="meals_2" name="meals_2" value="" max="7" /></td>
                </tr>
                  <tr>
                  <td>Answer 3</td>
                  <td><input type="number" id="meals_3" name="meals_3" value="" max="7" /></td>
                </tr>

                  <tr>
                  <td>Answer 4</td>
                  <td><input type="number" id="meals_4" name="meals_4" value="" max="7" /></td>
                </tr>

                  <tr>
                  <td>Answer 5</td>
                  <td><input type="number" id="meals_5" name="meals_5" value="" max="7" /></td>
                </tr>

                  <tr>
                  <td>Answer 6</td>
                  <td><input type="number" id="meals_6" name="meals_6" value="" max="7" /></td>
                </tr>


                  <tr>
                  <td>Answer 7</td>
                  <td><input type="number" id="meals_7" name="meals_7" value="" max="7" /></td>
                </tr>

                <tr height="20"><td></td></tr>
                <tr id="summeals"><td>Total:</td><td><input type="number" value="0" max="100" name="sum" class="sum" size="5" disabled />

                </td></tr>
              </table>
            </td>
          </tr>
        </table>

      </fieldset>

      <fieldset>

        <table width="100%" border="0" style="margin-right:10%;">
          <tr valign="top">
            <td >
              <table cellpadding="3">
                <tr>
                  <td>Answer 1</td>
                  <td><input type="number" id="meals_1" name="meals_1" value="" max="7" /></td>
                </tr>
                <tr>
                  <td>Answer 2</td>
                  <td><input type="number" id="meals_2" name="meals_2" value="" max="7" /></td>
                </tr>
                  <tr>
                  <td>Answer 3</td>
                  <td><input type="number" id="meals_3" name="meals_3" value="" max="7" /></td>
                </tr>

                  <tr>
                  <td>Answer 4</td>
                  <td><input type="number" id="meals_4" name="meals_4" value="" max="7" /></td>
                </tr>

                  <tr>
                  <td>Answer 5</td>
                  <td><input type="number" id="meals_5" name="meals_5" value="" max="7" /></td>
                </tr>

                  <tr>
                  <td>Answer 6</td>
                  <td><input type="number" id="meals_6" name="meals_6" value="" max="7" /></td>
                </tr>


                  <tr>
                  <td>Answer 7</td>
                  <td><input type="number" id="meals_7" name="meals_7" value="" max="7" /></td>
                </tr>

                <tr height="20"><td></td></tr>
                <tr id="summeals"><td>Total:</td><td><input type="number" value="0" max="100" name="sum" class="sum" size="5" disabled />

                </td></tr>
              </table>
            </td>
          </tr>
        </table>
       <input type="submit" class="btn" value="submit" id="button-cart" name="continue" />
      </fieldset>
    </form>

<div class="error"></div>

jQuery的：

$(function() {
  // Hide the jQuery Mobile button
  $('#button-cart').closest('.btn').hide();
  // Look for a change on inputs that start with "q8"
  $('input[name^="meals"]').change(function() {
    var sum = 0;
    // Loop through all inputs with names that start
    // with "q8" and sum their values
    $('input[name^="meals"]').each(function() {
      sum+= parseInt($(this).val());
    });

    // Set the sum
    $('.sum').val(sum);

    // If the sum == 7 then show the button otherwise
    // hide it
    if (sum == 7) {
      $('#button-cart').closest('.btn').show();
        $("div.error").html("Your percentage fields must sum to 7.").hide();   
    }
    else {
      $('#button-cart').closest('.btn').hide();
        $("div.error").html("Your percentage fields must sum to 7.").show(); 
    }      
  });
});

Answer 1

尝试此操作：迭代特定字段集内的所有输入并计算总和。然后验证每个求和字段和显示/隐藏按钮。

$(function() {
  // Hide the jQuery Mobile button
  $('#button-cart').hide();
  //put error message
  $("div.error").html("Your percentage fields must sum to 7.").hide();
  // Look for a change on inputs that name start with "meals"
  $('input[name^="meals"]').on("change keyup",function() {
    //get parent fieldset
    var $fieldSet = $(this).closest('fieldset');

    var sum = 0;
    //sum up all input inside fieldset
    $fieldSet.find('input[name^="meals"]').each(function() {
      sum+= parseInt($(this).val()) || 0;
    });

    // Set the sum
    $fieldSet.find('.sum').val(sum);

    var allSumAreSeven = true;

    //check all sum fields and update flag allSumAreSeven 
    $('form.table').find('.sum').each(function(){
          if(parseInt($(this).val())!=7)
              allSumAreSeven = false;
    });
    // If allSumAreSeven = true, then show button otherwise hide it
    if (allSumAreSeven) {
      $('#button-cart').show();
      $("div.error").hide();       
    }
    else {
      $('#button-cart').hide();
      $("div.error").show();       
    }   
  });
});

<强> wpautop

Answer 2

您需要定位正确的elements以更新.sum和validate。您需要验证相应inputs的{{1}}。只需对fieldset功能进行一些更改，这应该可行。

change

<强> Fiddle DEMO

如何验证字段集中的字段总和

2 个答案: