jQuery - 检查空输入有效，但只检查表中的第一行

Question

我有一个表格，其中包含包含输入、文本区域和选择的单元格，并且我使用了一个函数来检查这些单元格的值是否不为空，这对于第一行工作正常，但不执行检查对于表中的每一行，即使我已经通过它们所在的行类选择了输入（例如：$('tr.invoiceItems input')。

知道如何确保它通过表格中的每一行，而不仅仅是第一行吗？

第一行的 HTML（使用 Handlebars 模板）。在其他人插入之前在页面加载时自动添加：

{{#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：

<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

尝试用这个替换你的脚本，它应该可以工作。

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

在这里工作的小提琴：https://jsfiddle.net/20fsvkjg/