使用jQuery在html表td中的特定輸入字段上顯示錯誤

Question

我正在嘗試突出顯示html表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 Bootstrap向導（從現在開始使用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
                        }
                    });
                }
            }
        });
    });