why jquery.validate does not validate form fields in a hidden bootstrap accordion

Vote count:

0

I have a relatively large form which i have partitioned into 3 accordions (using bootstrap). Now i am using jquery.validate to validate the form. but it does not validate form fields in closed accordions. Is there any way to validate all form fields in all accordions while submitting the form?

Following is my HTML Code

<div class="panel panel-default">
<div class="panel-heading">
    <div class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
            href="#collapseOne"><?=lang('label_add_edit_pa')?></a>

    </div>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
    <form action="<?=base_url("red/submitNewProject")?>" method="POST"
        enctype="multipart/form-data" id="add_project_form">
        <input type="hidden" value="<?=@$project[key($project)] ['code'];?>"
            name="project_code" id="id" style="display: none;" />
        <div class="well">
            <div class="row">
                <div class="col-md-4">
                    <label for="code"><?=lang('label_project_code')?></label><input
                        type="text" name="code" value="<?=@$project['en']['code']?>"
                        class="form-control" id="code">
                </div>
<div class="col-md-4">
<label for="project_title"><?=lang('label_project_title')?></label>       
<input
        type="text" value="<?=@$project['en']['project_title']?>"
        name="project_title" class="form-control">
                </div>
                 <div class="col-md-4">
                     <label for="capacity"><?=lang('label_capacity')?></label><input
                        type="text" name="capacity"
                         value="<?=@$project['en']['capacity']?>" class="form-control">
                </div>
        <div class="col-md-4">
        <label for="project_duration"><?=lang('label_project_duration')?></label><input
                        type="text" value="<?=@$project['en']['project_duration']?>"
                        name="project_duration" class="form-control">
                 </div>
            </div>
         </div>
    </form>
</div>
</div>
<div class="panel panel-default">
 <div class="panel-heading">
     <div class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
            href="#collapseTwo"><?=lang('label_add_edit_pa')?></a>

     </div>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
    <div class="panel-body">
        <div class="well">
            <div class="row">

    <div class="col-md-4">
        <label for="project_title_da"><?=lang('label_project_title')?></label><input
                        type="text" value="<?=@$project['da']['project_title']?>"
                        name="project_title_da" class="form-control"
                        form="add_project_form">
                </div>


            </div>

        </div>
        <!-- end of well -->
    </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
    <div class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
            href="#collapseThree"><?=lang('label_add_edit_pa')?></a>

    </div>
 </div>
 <div id="collapseThree" class="panel-collapse collapse">

    <div class="panel-body">
        <div class="well">
            <div class="row">

                <div class="col-md-4">
    <label for="project_title_pa"><?=lang('label_project_title')?>    </label><input
                        type="text" value="<?=@$project['pa']['project_title']?>"
                        name="project_title_pa" class="form-control"
                        form="add_project_form" form="add_project_form">
                </div>


            </div>

        </div>
        <!-- end of well -->
    </div>
</div>
</div>

Now jquery.validate validates only opened accordion not the other two.

I tried to add ignore: "" to the options of form.validate() function but it is not working.

asked 44 secs ago

hussainfrotan

15

why jquery.validate does not validate form fields in a hidden bootstrap accordion