jQuery驗證插件錯誤安置在最後​​與動態行的形式

Question

我有一個窗體，用戶可以添加或刪除行的項目。一旦表單被提交，有幾個值，我驗證像值應該大於0或檢查該字段是否填充，它現在正在工作。我現在想要的是，我想在該tr的最後一個td中顯示該特定行項目的錯誤消息。由於用戶可以有多行，因此特定行的錯誤應該在最後td的行中。有人可以幫助我，我怎麼能實現這一目標？

我的電流輸入字段和選擇字段錯誤放置代碼是這樣的：對，我有選擇的兩個項目的情況下的一個

$("#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代碼：

<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屬性，並添加了一類required到相關的input元素，所以我可以爲我的演示生成驗證消息。

error.appendTo(element.next()); 

您定位.next()元素element被驗證之後。然而，在input元素之後沒有兄弟姐妹，所以沒有什麼可以追加的。

我想顯示該特定項目的錯誤消息，在過去td爲tr

相反，你需要兩個層次遍歷到父tr，選擇所有的孩子td，和最後在集合中最後的td。

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

DEMO：jsfiddle.net/7ft5u9yj/

您還需要有一個unhighlight功能，以配合您highlight功能。否則，當錯誤被清除時，這些類將不正確。

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