jquery 验证插件错误放置在具有动态行的表单中的最后 <td>

Question

我有一个表单，用户可以在其中添加或删除项目行。提交表单后，我会验证几个值，比如值应该大于 0 或检查该字段是否已填写并且它现在正在工作。我现在想要的是，我想在该 tr 的最后一个 td 中显示该特定行项目的错误消息。由于用户可以有多行，因此该特定行的错误应该在最后一个 td 的行中。有人可以帮助我如何实现吗？

我当前输入字段和 select 字段的错误放置代码是这样的：

$("#ItemsForm").validate({
    errorPlacement: function(error, element) {
    error.appendTo(element.next());
    console.log(error);
},
highlight: function(element, errorClass) {
           $(element).addClass(errorClass).parent().children("select").addClass(errorClass);
}
});

HTML 我有两个项目 selected 的场景之一的代码是：

<table class="width100" id="tableDiv">
<tbody>
    <tr>
        <th class="alignCenter">Item</th>
        <th class="alignCenter">Price</th>
        <th class="alignCenter">Quantity</th>
        <th class="alignCenter">Discount</th>
        <th class="alignCenter">&nbsp;</th>
    </tr>

    <tr id="Row_1">
        <td class="products alignCenter">
            <select name="item_1" id="item_1" class="products box-style select-style">
                <option value="">-- select --</option>          
                    <option value="1001" >Item 1</option>
                    <option value="1002" >Item 2</option>
                    <option value="1003" >Item 3</option>
                    <option value="1004" >Item 4</option>           
            </select>
        </td>
        <td><input type="text" name="Price_1" id="Price_1" value="999.00" class="text-box-style width95 alignCenter" disabled="disabled" /></td>
        <td class="quantity"><input type="text" name="quantity_1" id="quantity_1" value="1" maxlength="4" class="quantity text-box-style width95 alignCenter"  /></td>
        <td class="discount"><input type="text" name="discount_1" id="discount_1" value="10" maxlength="3" class="discount text-box-style width95 alignCenter discountBox" /></td>
        <td class="alignCenter"><i onclick="addRow(this.form);" title="Add line item" class="fa fa-plus icon-cog" /></td>
    </tr>

    <tr id="Row_2">
        <td class="products alignCenter">
            <select name="item_2" id="item_2" class="products box-style select-style">
                <option value="">-- select --</option>          
                    <option value="1001" >Item 1</option>
                    <option value="1002" >Item 2</option>
                    <option value="1003" >Item 3</option>
                    <option value="1004" >Item 4</option>           
            </select>
        </td>
        <td><input type="text" name="Price_2" id="Price_2" value="3000.00" class="text-box-style width95 alignCenter" disabled="disabled" /></td>
        <td class="quantity"><input type="text" name="quantity_2" id="quantity_2" value="2" maxlength="4" class="quantity text-box-style width95 alignCenter" /></td>
        <td class="discount"><input type="text" name="discount_2" id="discount_2" value="10" maxlength="3" class="discount text-box-style width95 alignCenter discountBox" /></td>
        <td class="alignCenter"><i onclick="removeRow('2');" title="Remove line item" class="fa fa-minus icon-cog" /></td>
    </tr>

    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td class="alignCenter"><input type="submit" name="submit" id="submit" value="Save" class="width75 box-style btn-style" /></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</tbody>

Answer 1

我添加了 form 标签，清空了 value 属性，并向相关的 input 元素添加了 class of required 以便我可以生成我的演示的验证消息。

error.appendTo(element.next());

您在验证 element 之后定位 .next() 元素。但是，input 元素之后没有兄弟姐妹，因此没有任何内容可以附加到。

I want to show the error message for that particular line item in the last td for that tr

相反，您需要向上遍历两层到父级 tr、select 所有子级 td，最后是集合中的最后一个 td。

error.appendTo(element.parents('tr').children('td').last());

演示：jsfiddle.net/7ft5u9yj/

您还需要一个 unhighlight 功能来补充您的 highlight 功能。否则，错误清除后classes将不正确。

highlight: function(element, errorClass) {
    $(element).addClass(errorClass).parent().children("select").addClass(errorClass);
},
unhighlight: function(element, errorClass) {
    $(element).removeClass(errorClass).parent().children("select").removeClass(errorClass);
}

jquery 验证插件错误放置在具有动态行的表单中的最后 <td>

jquery validation plugin error placement at the last <td> in form with dynamic rows

jquery

jquery-validate