使用動態ID和名稱驗證動態生成的輸入框

Question

我有一個添加兩個輸入字段onclick的按鈕。 下面是代碼：

<button type="button" class="btn btn-warning btn-xs" id="additem">
Click here to add Items</button>
<form>
<div id="inputboxes"></div>
<input type="submit">
</form>

而JQuery是

var i = 1,
    j = 1,
    k = 1,
    l = 1;
$("#additem").click(function () {
    $("#inputboxes").append("<div class='form-group'><input type='text' id='iname" +
        (j++) +
        "' name='iname" +
        (i++) +
        "' class='form-control'  placeholder='Enter Item Name' required='required'/></div> " +
        "<div class='form-group'><input type='text' id='iprice" +
        (k++) +
        "'   name='iprice" +
        (l++) +
        "' class='form-control'  placeholder='Enter Item Price' required='required'/></div>");
})

如何在提交表單時驗證這些動態添加的輸入框的空值和正確值？

Answer 1

您可以執行以下操作：

$('.form-group').each(function(){
  var input = $(this).children('input');
  if(input.val() == '' || input.val() == undefined){
    // the errors you will give
  }else{
    if(input.attr('id').substring(0, 5) == 'iname'){
      //function to validate your iname
    }else if(input.attr('id').substring(0, 6) == 'iprice'){
      //function to validate your iprice
    }
  }
});