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

Posted 2023-05-09

【中文标题】jQuery - 检查空输入有效，但只检查表中的第一行

【英文标题】：jQuery - Check empty inputs works but only checks first row in table

【发布时间】：2017-11-30 10:46:01

【问题描述】：

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

【问题讨论】：

请出示您的html代码

完成。抱歉，忘记添加了

【参考方案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/

【讨论】：

主要工作，但由于某种原因忽略了空的 .descriptionInput

您能否为您的场景创建一个小提琴，以便我可以更好地帮助您。

已经为您完成了：jsfiddle.net/qe1gcfu1/3，但由于某种原因，即使加载了 jquery，点击保存也无济于事

jsfiddle.net/kq9xy07u这个小提琴我已经改了，你看看是否可以。

好吧，不知道为什么它之前对我不起作用，但现在似乎起作用了。非常感谢