Question

我有一个包含输入，textareas和选择的单元格的表格，并且我使用了一个函数来检查这些值的值是否为空，这对于第一行工作正常，但是没有。即使我已经通过它们所在的行类选择了输入（例如：$（＆＃39; tr.invoiceItems input＆＃39;）），也要对表格中的每一行执行检查。

我知道如何确保这会超过表中的每一行而不仅仅是第一行吗？

第一行的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/

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

1 个答案: