Show error on specific input field in html table td using jQuery

Question

I am trying to highlight the input field which is in html table td. I am looping the html table but unable to highlight the input field if quantity is 0 in input field. what i have tried is below.

<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>

Below is my jquery code where i am looping the html table and want to highlight the input field which is in html table 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

You are filtering per ID ( #Quantity ). Two (or more) elements cannot share the same ID. Try to select elements by name, for example:

$('#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');
    }
});

Remember to change id property of Quantity elements to name .

Note: untested code that might not work as-is, I'm just showing you the right direction.

Answer 2

If your intention is to use the Twitter Bootstrap Wizard (TBW from now on) for your validation flow, you probably don't want this validation to trigger when you open the tab , which is what happens, when you place your code inside of the onTabShow function.

I assume you want the validation of the fields to be done when the user wants to go to the next step, by pressing the "Next" link you have, or rather, when you want to load the "next tab". For this, you should use onNext rather than onTabShow for your validation.

$(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;
        }
  });
});

For this to work, you'll have to replace id="Quantity" with name="Quantity" , in both your instances.

If you want to use .focus() on the first element, regardless of which input is invalid, you should remove $(this).focus() from the previous example, and instead replace if(!res) return false with the following:

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
                        }
                    });
                }
            }
        });
    });