使用jQuery在html表td中的特定输入字段上显示错误

Question

我试图突出显示 html table td 中的输入字段。我正在循环 html 表，但如果输入字段中的数量为 0，则无法突出显示输入字段。我尝试过的如下。

<div id="rootwizard">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul>
          <li><a href="#details" data-toggle="tab">details</a></li>
          <li><a href="#captain" data-toggle="tab">captain</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content">
    <div class="tab-pane" id="details">
      <div class="row">
        <div class="col-sm-12">
          <h4 class="info-text">
            Let's start with the basic details.
          </h4>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <div class="col-md-12">
              <div class="persons">
                <table class="table table-condensed table-hover" id="tblPurchaseOrders">
                  <tr>
                    <th>
                      Product Code
                    </th>
                    <th>
                      SKU
                    </th>
                    <th>
                      Product Name
                    </th>
                    <th>
                      Quantity
                    </th>
                  </tr>

                  <tr>
                    <td>
                      <input type="text" name="ProductCode" value="A" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="SKU" value="A1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="Name1" value="A1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" id="Quantity" value="0" class="form-control" />
                    </td>
                  </tr>


                  <tr>
                    <td>
                      <input type="text" name="ProductCode" value="B" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="SKU" value="B1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="Name1" value="B1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" id="Quantity" value="1" class="form-control" />
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <hr />

        </div>
      </div>
    </div>
    <div class="tab-pane" id="captain">
      <div class="row">
        <div class="form-group">
          <div class="col-md-12">
            <table class="table table-condensed table-hover" id="tbOrderDetail">
              <tr>
                <th>
                  Product Code
                </th>
                <th>
                  SKU
                </th>
                <th>
                  Product Name
                </th>
                <th>
                  Quantity
                </th>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <ul class="pager wizard">
      <li class="previous first" style="display:none;"><a href="#">First</a></li>
      <li class="previous"><a href="#">Previous</a></li>
      <li class="next last" style="display:none;"><a href="#">Last</a></li>
      <li class="next"><a href="#">Next</a></li>
    </ul>
  </div>
</div>
<div class="tab-content">


</div>

下面是我的 jquery 代码，我在其中循环 html 表并希望突出显示 html 表 td 中的输入字段。

$(document).ready(function() {
  $('#rootwizard').bootstrapWizard({
    onTabShow: function(tab, navigation, index) {

      if (index == 1) {
        $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
          if (parseInt(($(this).find('#Quantity')).val()) == 0)
          {
          //show error
           }
        });        
      }

    }
  });
 });

Answer 1

您正在按 ID (#Quantity) 进行过滤。两个（或更多）元素不能共享同一个 ID。尝试按名称选择元素，例如：

$('#tblPurchaseOrders').find('td > input[name=Quantity]').each(function() {
    var val = $(this).val();
    if (parseInt(val) == 0)
    {
        // show error
        // note: if needed, you can obtain a reference
        // to container <tr> using:  $(this).parent('tr');
    }
});

记得将Quantity元素的id属性更改为name。

注意：未经测试的代码可能无法按原样运行，我只是在向您展示正确的方向。

Answer 2

如果您打算使用 Twitter 引导向导（从现在开始为 TBW）进行验证流程，您可能不希望在打开选项卡时触发此验证，这就是当您将代码放在 onTabShow 函数中时，就会发生这种情况。

我假设您希望在用户想要进入下一步时完成字段验证，方法是按下您拥有的“下一步”链接，或者更确切地说，当您想要加载“下一个选项卡”时。为此，您应该使用onNext 而不是onTabShow 进行验证。

$(document).ready(function() {
    $('#rootwizard').bootstrapWizard({
        tabClass: 'nav nav-pills',
        onNext: function(tab, navigation, index) {
            var res = $("input[name='Quantity']").each(function() {
                var val = $(this).val();

                if(parseInt(val) == 0) {
                    $(this).focus();

                    // This will stop the .each-iteration
                    // We only want to focus the _first_ element, otherwise it
                    // would keep iterating, and change focus to the next 0-valued input
                    return false;
                }
            });

            // We use the result returned from running the each function
            // If false was returned at any point during the .each function,
            // var res will be false. Pass this onto the onNext call, to
            // prevent the the user to move to next tab.
            if(!res) return false;
        }
  });
});

为此，您必须在两个您的实例中将id="Quantity" 替换为name="Quantity"。

如果您想在第一个元素上使用.focus()，无论哪个输入无效，您都应该从前面的示例中删除$(this).focus()，并将if(!res) return false 替换为以下内容：

if(!res) {
    $("input[name='Quantity']").first().focus();
    return false;
}

Answer 3

Can you try this


<div id="rootwizard">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul>
                    <li><a href="#details" data-toggle="tab">details</a></li>
                    <li><a href="#captain" data-toggle="tab">captain</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="tab-content">
        <div class="tab-pane" id="details">
            <div class="row">
                <div class="col-sm-12">
                    <h4 class="info-text">
                        Let's start with the basic details.
                    </h4>
                </div>
                <div class="form-horizontal">
                    <div class="form-group">
                        <div class="col-md-12">
                            <div class="persons">
                                <table class="table table-condensed table-hover" id="tblPurchaseOrders">
                                    <tr>
                                        <th>
                                            Product Code
                                        </th>
                                        <th>
                                            SKU
                                        </th>
                                        <th>
                                            Product Name
                                        </th>
                                        <th>
                                            Quantity
                                        </th>
                                    </tr>
                                    <tbody id="dtTable">
                                    <tr>
                                        <td>
                                            <input type="text" name="ProductCode" value="A" class="form-control" />
                                        </td>
                                        <td>
                                            <input type="text" name="SKU" value="A1" class="form-control" />
                                        </td>
                                        <td>
                                            <input type="text" name="Name1" value="A1" class="form-control" />
                                        </td>
                                        <td>
                                            <input type="text" id="Quantity" value="0" class="form-control" />
                                        </td>
                                    </tr>


                                    <tr>
                                        <td>
                                            <input type="text" name="ProductCode" value="B" class="form-control" />
                                        </td>
                                        <td>
                                            <input type="text" name="SKU" value="B1" class="form-control" />
                                        </td>
                                        <td>
                                            <input type="text" name="Name1" value="B1" class="form-control" />
                                        </td>
                                        <td>
                                            <input type="text" id="Quantity" name="Quantity" value="1" class="form-control" />
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <hr />

                </div>
            </div>
        </div>
        <div class="tab-pane" id="captain">
            <div class="row">
                <div class="form-group">
                    <div class="col-md-12">
                        <table class="table table-condensed table-hover" id="tbOrderDetail">
                            <tr>
                                <th>
                                    Product Code
                                </th>
                                <th>
                                    SKU
                                </th>
                                <th>
                                    Product Name
                                </th>
                                <th>
                                    Quantity
                                </th>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <ul class="pager wizard">
            <li class="previous first" style="display:none;"><a href="#">First</a></li>
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next last" style="display:none;"><a href="#">Last</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </div>
</div>
<div class="tab-content">


And Javascript code


$(document).ready(function () {
        $('#rootwizard').bootstrapWizard({
            onTabShow: function (tab, navigation, index) {
                if (index == 0) {
                    $('#dtTable tr').each(function (i, row) {
                        $(this).find('[name=Quantity]').each(function () {
                            alert($(this).val())
                        })
                        if ($(this).val() == 1) {
                            ///Do something
                        }
                    });
                }
            }
        });
    });