jQuery - Überprüfen Sie leere Eingaben funktioniert aber überprüft nur die erste Zeile in Tabelle

Question

Ich habe eine Tabelle mit Zellen, die Eingaben enthalten, Textareas und wählt, und ich habe eine Funktion verwendet, um zu überprüfen, dass die Werte dieser nicht leer sind, was funktioniert in Ordnung für die erste Zeile, führt aber nicht die Überprüfung für jede Zeile in der Tabelle durch, obwohl ich die Eingaben über die Zeilenklasse ausgewählt habe, in der sie sich befinden (Beispiel: $ ('tr.invoiceItems input').

?.

jede Idee, wie ich, dass dies in der Tabelle über jede Zeile geht gewährleisten könnte und nicht nur den erst

HTML für die erste Reihe (Lenker Templat verwenden) automatisch beim laden der Seite hinzugefügt, bevor andere eingefügt:

{{#each Items}} 

    <tr class="invoiceItems"> 

     <td style="display:none" class="invoiceItemId" value="{{Id}}">{{Id}}</td> 

     <td class="descriptionColumn" style="height: 18.5667px"> 

      <input class="descriptionInput" style="resize:none; margin: 0" rows="1" value="{{Description}}"></input> 

     </td> 

     <td class="nominalColumn"> 

      <select class="nominalInput"> 

       <option value="{{NominalId}}" selected>{{NominalName}}</option> 

      </select> 

     </td> 

     <td class="quantityColumn"> 

      <input type="number" class="quantityInput" value="{{Quantity}}"></input> 

     </td> 

     <td class="unitPriceColumn"> 

      <input type="text" class="unitPriceInput alignRight" value="{{UnitPrice.BaseValue}}"></input> 

     </td> 

     <td class="subtotalColumn inputDisabled"> 

      <input type="text" class="itemSubtotal alignRight" value="{{Subtotal.BaseValue}}" disabled></input> 

     </td> 

     <td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;"> 

      <select class="taxCodeInput"> 

       <option value="{{TaxCodeId}}" selected>{{TaxCodeName}}</option> 

      </select> 

     </td> 

     <td style="display:none"> 

      <input class="itemTaxCodeId" value="{{TaxCodeId}}" disabled></input> 

     </td> 

     <td style="display:none" class="inputDisabled"> 

      <input type="number" class="itemTaxRate" value="{{TaxRate}}" disabled></input> 

     </td> 

     <td class="taxValueColumn inputDisabled"> 

      <input type="text" class="itemTaxValue inputDisabled alignRight" value="{{Tax.BaseValue}}" disabled></input> 

     </td> 

     <td class="deleteItemColumn"> 

      <div> 

       <a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a> 

      </div> 

     </td> 

    </tr> 

    {{/each}} 

HTML für zusätzliche Zeilen später Click-Handler hinzugefügt:

<tr class="invoiceItems"> 

<td class="descriptionColumn"> 

    <input class="descriptionInput editInvoiceItemDescription" style="resize:none" placeholder="Item Description" value=""></input> 

</td> 

<td style="text-align:left; margin-left:10px; padding-left:0;" class="nominalColumn"> 

    <select class="nominalInput"> 

     <option id="defaultNominal" value="">Select Nominal</option> 

    </select> 

    </td> 

<td class="quantityColumn"> 

    <input type="number" class="quantityInput" placeholder="0" value=""></input> 

</td> 

<td class="unitPriceColumn"> 

    <input type="text" class="unitPriceInput alignRight" placeholder="0.00" value=""></input> 

</td> 

<td class="subtotalColumn inputDisabled"> 

    <input type="text" class="itemSubtotal inputDisabled alignRight" disabled value="0.00"></input> 

</td> 

<td class="taxCodeColumn" style="text-align:left; margin-left:4px; padding-left:0;"> 

    <select class="taxCodeInput"> 

     <option id="defaultTaxCode" value="">Select Tax Code</option> 

    </select> 

</td> 

<td style="display:none"> 

    <input class="itemTaxCodeId inputDisabled" disabled></input> 

</td> 

<td style="display:none"> 

    <input type="number" class="itemTaxRate inputDisabled" disabled></input> 

</td> 

<td class="taxValueColumn inputDisabled"> 

    <input type="text" class="itemTaxValue inputDisabled alignRight" disabled value="0.00"></input> 

</td> 

<td class="deleteItemColumn"> 

    <a class="deleteInvoiceItem" href="#"><span class="fa fa-times fa-lg"></span></a> 

</td> 

JS:

$('#saveInvoice').click(function(e) { 
    e.preventDefault(); 
    var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ]; 
    var $emptyFields = $fields.filter(function(element) { 
     return $.trim(element.val()) === ''; 
    }); 
    if (!$emptyFields.length) { 
     saveInvoice(); 
    } else { 
     alert('Unable to save invoice. There are incomplete item fields.'); 
    } 
}); 

Answer 1

Versuchen Sie Ihr Skript mit diesem ersetzen es funktionieren sollte.

$('#saveInvoice').click(function(e) { 
      e.preventDefault(); 
      var $fields = [ $('tr.invoiceItems input'), $('tr.invoiceItems textarea'), $('tr.invoiceItems select') ] 
      var $emptyFields; 

      for(var i=0;i< $fields.length;i++){ 
      $emptyFields = $fields[i].filter(function(i,element) { 
       return $.trim($(this).val()) === ''; 
      }); 
      if ($emptyFields.length) 
      break; 
      } 
      if (!$emptyFields.length) { 
       saveInvoice(); 
      } else { 
       alert('Unable to save invoice. There are incomplete item fields.'); 
      } 
     }); 

Arbeits Fiddle hier: https://jsfiddle.net/20fsvkjg/