Jquery: Add dynamic fields and validate using jquery validation plugin

Html form where you will add dynamic fields:

<script type="text/javascript" src="<?php echo HTTP_FORM_VALIDATION_PATH; ?>js/jquery.validate.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></script>
<!-- Custom script for phone number validation start -->
<script type="text/javascript">
    jQuery.validator.addMethod("phoneno", function(phone_number, element) {
        phone_number = phone_number.replace(/\s+/g, "");
        return this.optional(element) || phone_number.length < 11 && phone_number.length > 9 && 
        phone_number.match(/^((\+[1-9]{1,4}[ \-]*)|(\([0-9]{2,3}\)[ \-]*)|([0-9]{2,4})[ \-]*)*?[0-9]{3,4}?[ \-]*[0-9]{3,4}?$/);
      },"Please specify a valid phone number");

    jQuery.validator.addMethod("money", function(value, element) {
      var isValidMoney = /^\d{0,7}(\.\d{0,2})?$/.test(value);
      return this.optional(element) || isValidMoney;
    },"Please enter a valid price (eg. 100.00)");
</script>
<!-- Custom script for phone number validation Ends -->
<!-- Form Validation End -->
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo base_url('assets/js/adddynamicelementscript.js'); ?>"></script>

 <?php $attributes = array('class' => 'form-horizontal', 'id' => 'finishgood_form'); ?>
 <?php echo form_open_multipart('admin/products/add_finish_good', $attributes);?>

<div class="row panel">
    <div class="col-sm-2 label-left">
    </div>
    <div class="col-sm-4" >
        <button class="btn btn-primary" type="button" id="adddesign">Add Design</button>
        <button class="btn btn-primary" type="button" id="reset">Reset</button>
    </div>
</div>
<div id="InputsWrapper">
    
</div>
<div class="row panel">
    <div class="col-sm-2 label-left"></div>
    <div class="col-sm-4">
        <div class="text-right">
            <button class="btn btn-primary" type="reset">Reset</button>
            <button class="btn btn-primary" type="submit">Submit</button>
        </div>
    </div>
</div>
<?php echo form_close(); ?>

script for adding dynamic fields adddynamicelementscript.js:

$(document).ready(function(){
            
        var InputsWrapper = $("#InputsWrapper"); 
        var designfieldcount = 0;
        var colorfieldCount = 0;
        var designnamefield = $("#adddesign");
        
        
        $(InputsWrapper).sortable();
            
        $(designnamefield).click(function() {
            designfieldcount++;
            $(InputsWrapper).append(
                '<div class="row panel">'+
                '<div class="col-sm-2 label-left"></div>'+
                '<div class="col-sm-4" id= "design'+designfieldcount+'">'+
                '<input type="hidden" id="de_color_id'+designfieldcount+'" class="de_color_id" name="de_color_id" value="'+designfieldcount+'">'+
                '<div class="input-group design_'+designfieldcount+'">'+
                '<input class="form-control designname" type="text" name="designname&#91;'+designfieldcount+'&#93;" id="design_' + designfieldcount + '" placeholder="Design ' + designfieldcount + '"/>'+
                '<span class="input-group-btn" style="vertical-align: top">'+
                '<button class="removedesign btn btn-danger">x</button>'+
                '<button class="addcolor btn btn-primary">Add Color</button>'+
                '</span>'+
                '</div>'+
                '</div>'+
                '</div>'
                );
            $(".designname").each(function(){
                $(this).rules("add", {
                    required:true,
                    messages: {
                    required: "Design Name is required"
                  }
                });                   
            });
            return false;
        });
            
        $("body").on("click", ".removedesign", function() {
            $(this).parent('span').parent('div').parent('div').parent('div').remove(); 
            return false;
        });
            
        $("body").on("click", ".addcolor", function() {
            colorfieldCount++;
            var de_id=$(this).parent('span').parent('div').parent('div').find("input[id*='de_color_id']");
            var design_id = de_id.val();

            $(this).parent('span').parent('div').parent('div').append(
                '<div class="col-sm-12 input-group color_'+colorfieldCount+'" id="color">'+
                '<div class="col-sm-6">'+
                '<input class="form-control colorname required" type="text" name="colorname&#91;'+design_id+'&#93;&#91;&#93;" id="design'+designfieldcount+'_color' + colorfieldCount + '" placeholder="Color"/>'+
                '</div>'+
                '<div class="col-sm-6">'+
                '<input class="form-control colorprice required" type="text" name="colorprice&#91;'+design_id+'&#93;&#91;&#93;" id="design'+designfieldcount+'_price' + colorfieldCount + '" placeholder="Price"/>'+
                '</div>'+
                '<span class="input-group-btn" style="vertical-align: top">'+
                '<button class="removecolor btn btn-danger">x</button>'+
                '</span>'+
                '</div>'
            );
            $(".colorname").each(function(){
                $(this).rules("add", {
                    required:true,
                    messages: {
                    required: "Color Name is required"
                  }
                });                   
            });
            $(".colorprice").each(function(){
                $(this).rules("add", {
                    required:true,
                    money : true,
                    messages: {
                    required: "Color Price is required"
                    }
                });                   
            });
            return false;
        });
            
        $("body").on("click", ".removecolor", function() {
            $(this).parent('span').parent('div').remove(); 
            return false;
        });
            
        $("#reset").on("click", function() {
            $("#InputsWrapper").empty();
                designfieldcount=0;
                colorfieldCount=0;
        });
    });

Modify your jquery.validate.js as follow :

// checkForm: function() {
// this.prepareForm();
// for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
// this.check( elements[i] );
// }
// return this.valid();
// },

checkForm: function() {
this.prepareForm();
for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) { this.check( this.findByName( elements[i].name )[cnt] ); } } else { this.check( elements[i] ); } } return this.valid(); }, [/code]