JQuery Validate not working on array elements

Question

I have an HTMl code:

<?php
if(isset($company_admin))
    {
        $tot_admin = count($company_admin);
        for($i = 0; $i < $tot_admin; $i++)
        {?>
            <div class="form-group col-sm-12">
            <label class="col-sm-2">Admin Name  <?php if($i > 0) echo ($i+1);?><span class="required_span">*</span></label>
            <div class="col-sm-9">
            <input type="text" class="form-control" placeholder="Admin Name" name="com_admin[]" id="com_admin<?php if($i > 0) echo '_'.($i+1);?>"  value="<?php if(isset($company_admin[$i]['name'])){ echo $company_admin[$i]['name'];}?>"></div>
            </div>

            <div class="form-group col-sm-12">
                <label class="col-sm-2">Admin Image <?php if($i > 0) echo ($i+1);?></label>
                <div class="col-sm-9">
                <input type="hidden" name="hid_admin_img[]" id="hid_admin_img<?php if($i > 0) echo '_'.($i+1);?>" value="<?php if(isset($company_admin[$i]['admin_img'])) { echo $company_admin[$i]['admin_img'];} ?>">
                <input type="file" name="admin_img[]" id="admin_img<?php if($i > 0) echo '_'.($i+1);?>" class="form-control"></br>
                <div id="imagePreview3<?php if($i > 0) echo '_'.($i+1);?>"></div>
                <div id="existImage3<?php if($i > 0) echo '_'.($i+1);?>">
        <?php if(isset($company_admin[$i]['admin_img'])) {?>
             <?php if($company_admin[$i]['admin_img'] != ''){?><img src="<?php echo base_url();?>uploads/admin_org/<?php echo $company_admin[$i]['admin_img'];?>" height="100" width="100"><?php } else {?><img src="<?php echo base_url();?>uploads/new-user-image-default.png" height="100" width="100"><?php } }?>
                </div>
                </div>
                </div>

                <div class="form-group col-sm-12">
                    <label class="col-sm-2">Admin Email <?php if($i > 0) echo ($i+1);?><span class="required_span">*</span></label>
                <div class="col-sm-9">
                <?php if(isset($company_admin[$i]['user_name']))
                     { 
                        if($i > 0)
                        {?> 
                            <input type="email" onblur="chk_user_edit_multiple(<?php  echo ($i+1);?>);" class="form-control" placeholder="Admin Username" name="com_username[]" id="com_username<?php if($i > 0) echo '_'.($i+1);?>"  value="<?php if(isset($company_admin[$i]['user_name'])){ echo $company_admin[$i]['user_name'];}?>">
                   <?php  }
                     else 
                        {?> 
                                                            <input type="email" onblur="chk_user_edit();" class="form-control" placeholder="Admin Username" name="com_username[]" id="com_username<?php if($i > 0) echo '_'.($i+1);?>"  value="<?php if(isset($company_admin[$i]['user_name'])){ echo $company_admin[$i]['user_name'];}?>">
            <?php   } 
                  }
                else 
                 { ?>
                    <input type="email" onblur="chk_user();" class="form-control" placeholder="Admin Username" name="com_username[]" id="com_username<?php if($i > 0) echo '_'.($i+1);?>"  value="<?php if(isset($company_admin[$i]['user_name'])){ echo $company_admin[$i]['user_name'];}?>">
                <?php }?> 
                    </div>
                    <input type="hidden" name="hid_usr_id[]" id="hid_usr_id<?php if($i > 0) echo '_'.($i+1);?>" value="<?php if(isset($company_admin[$i]['admin_id'])){echo $company_admin[$i]['admin_id'];} ?>">
                </div>

                <div class="form-group col-sm-12">
                    <label class="col-sm-2">Admin Password <?php if($i > 0) echo ($i+1);?><span class="required_span">*</span></label>
                    <div class="col-sm-9">
                    <input type="text" class="form-control" placeholder="Admin Password" name="com_password[]" id="com_password<?php if($i > 0) echo '_'.($i+1);?>"  value="<?php if(isset($company_admin[$i]['password'])){ echo base64_decode($company_admin[$i]['password']);}?>"></div>
                    </div>

                    <?php
                                            if($this->uri->segment(2)=='edit' && strpos(strtolower($company_name),'bhagal')!==false)
                    {?>
                        <div class="form-group col-sm-12">
                            <label class="col-sm-2">Admin Zonal Code <?php if($i > 0) echo ($i+1);?><span class="required_span">*</span></label>
                            <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="Admin Zonal Code" name="com_zone[]" id="com_zone<?php if($i > 0) echo '_'.($i+1);?>"  value="<?php if(isset($company_admin[$i]['zonalcode'])){ echo $company_admin[$i]['zonalcode'];}?>"></div>
                            </div>
                    <?php
                        }
                    }
                if($tot_admin <= 4 && $this->uri->segment(2)=='edit' && strpos(strtolower($company_name),'bhagal')!==false)
                {?>
                    <input type="text" id="tot_admin" name="tot_admin" value="<?php echo $tot_admin;?>"/>
                    <div class="form-group col-sm-12">
                                                <div class="col-sm-9">
                                                <label class="col-sm-2">Add more<span class="required_span">*</span></label>
                                                <a href="javascript:void(0)" onclick="append_admin();"><img src="<?php echo base_url();?>assets/img/more.png" height="20px" width="20px"></a>
                                                </div>
                                                </div>

                                            <div id="more_admin_container">
                                            </div>  

                                            <?php
                                            }
                                        }

Now as you all can see, the elements are in array like com_username[] , and com_admin[] .

So in order to validate the form, I have used Jquery Validate and here's my code:-

$(document).ready(function() 
        {

        var com_id = $("#hid_com_id").val();
        if(com_id == '')
        {
            $('#frm_add').validate( {   
                rules: {
                    com_name: { 
                        required: true,
                    },
                    com_type: { 
                        required: true,
                    },
                    com_logo: { 
                        required: true,
                    },
                    com_banner: { 
                        required: true,
                    },
                    com_address: { 
                        required: true,
                    },  
                    com_email: { 
                        required: true,
                    },  
                    com_phone: { 
                        required: true,
                    },
                    'com_admin[]': { 
                        required: true,
                    },
                    'com_username[]': { 
                        required: true,
                    },  
                    'com_password[]': { 
                        required: true,
                    }                               
                },
                messages: {
                    com_name: { 
                        required: "Please provide Company Name.",
                    },
                    com_type: { 
                        required: "Please provide Company Type.",
                    },
                    com_logo: { 
                        required: "Please provide Company Logo.",
                    },
                    com_banner: { 
                        required: "Please provide Company Banner.",
                    },
                    com_address: { 
                        required: "Please provide Company Address.",
                    },
                    com_email: { 
                        required: "Please provide Company Email Id.",
                    },
                    com_phone: { 
                        required: "Please provide Company Phone No.",
                    },
                    'com_admin[]': { 
                        required: "Please provide Company Admin Name.",
                    },
                    'com_username[]': { 
                        required: "Please provide Company Admin Username.",
                    },
                    'com_password[]': { 
                        required: "Please provide Company Admin Password.",
                    }
                },      
            }); 
        }   
        else
        {
          $('#frm_add').validate( { 
                rules: {
                    com_name: { 
                        required: true,
                    },
                    com_type: { 
                        required: true,
                    },
                    com_address: { 
                        required: true,
                    },  
                    com_email: { 
                        required: true,
                    },  
                    com_phone: { 
                        required: true,
                    },
                    'com_admin[]': { 
                        required: true,
                    },
                    'com_username[]': { 
                        required: true,
                    },  
                    'com_password[]': { 
                        required: true,
                    }                               
                },
                messages: {
                    com_name: { 
                        required: "Please provide Company Name.",
                    },
                    com_type: { 
                        required: "Please provide Company Type.",
                    },
                    com_address: { 
                        required: "Please provide Company Address.",
                    },
                    com_email: { 
                        required: "Please provide Company Email Id.",
                    },
                    com_phone: { 
                        required: "Please provide Company Phone No.",
                    },
                    'com_admin[]': { 
                        required: "Please provide Company Admin Username.",
                    },
                    'com_username[]': { 
                        required: "Please provide Company Admin Username.",
                    },
                    'com_password[]': { 
                        required: "Please provide Company Admin Password.",
                    }
                },      
            }); 
        }

        });

As you can see, the objects which are in array format has been used as 'com_username[]' in the rule section. Source this and this

But, still when I am keeping the fields blank, I am not getting any validation. However the same code works good for other none array objects.

Answer 1

jquery.validate.js only validates the first element of array. You need to modify checkForm() a bit.

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

Please take a look at this