Validate dynamically generated input box with dynamic ID and name

Question

I have a button that adds two input field onclick. Below is the code:

<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>

and JQuery is

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>");
})

How can i validate these dynamically added input boxes for empty and correct values on submitting the form?

Answer 1

You can do something like:

$('.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
    }
  }
});