John John - 2 months ago 10
jQuery Question

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

I have a form where users can add or remove rows of items. Once form is submitted, there are couple of values that I validate like values should be greater than 0 or check for if the field is filled or not and it's working now. What I want right now is that I want to show the error message for that particular line item in the last td for that tr. As users can have multiple rows, errors for that particular row should be in that rows last td. Can someone please help me how can I achieve that?

My current error placement code for input fields and select fields is this:

$("#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 code for one of the scenario where I have two items selected is:

<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

I added form tags, emptied the value attributes, and added a class of required to relevant input elements just so I could generate validation messages for the demo.

error.appendTo(element.next());

You were targeting .next() element after the element being validated. However, there are no siblings after the input element so there is nothing there to append to.

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

Instead you need to traverse up two levels to the parent tr, select all children td, and finally the last td in the set.

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

DEMO: jsfiddle.net/7ft5u9yj/

You also need to have a unhighlight function to complement your highlight function. Otherwise, the classes will not be correct when the error is cleared out.

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