function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Balakumar RamachandranBalakumar Ramachandran 

Jquery bootstrap panel validation not happening when collapsed

Hi all,

I have a bootstrap page with Jquery validation.

I have 2 panels and when the 2 panels are kept opened the jquery validation is working and my custom error messages are shown where as when i collapse the 2 panels and submit the form, validation does not seem to occur instead the salesforce default error message pop'sup in the respective fields.

can anyone suggest. 
Balakumar RamachandranBalakumar Ramachandran
posting the sample code

<script type="text/javascript">
 
  $(document).ready(function($) { 
     
  
    $(".validateForm").validate({
                       excluded: ':disabled',
                       rules: { 
                                   '{!$Component.mypage.loginForm.pgblock.mypage:loginForm:pgblock:acctName1}': {required:true}
     
                               },
                         messages: {  
                                     '{!$Component.mypage.loginForm.pgblock.mypage:loginForm:pgblock:acctName1}': "Account Name is a required field"

                                     },
                                       
                            errorClass:"error_show"
                    });
    });
   </script>

<div class="panel-group" id="accordion">
 
 <div id="panel2" class="panel panel-default">

       <div class="panel-heading" style="color:white;font-size:11pt;font-family:Arial, Helvetica, sans-serif;">cde</strong>
           <span class="pull-right clickable" > <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><i style="color:white;" class="glyphicon glyphicon-chevron-up"></i></a></span> 
       </div>
      
     <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
              
             <div >                 
                   <div class="form-group col-md-4"> 
                                 <label for="acctname"  class="control-label">sdf</label>
                                      <apex:inputfield value="{!opp.asd}" id="acctName1" styleclass="form-control" />

                   </div>                
             </div>
      </div>
</div>  
</div>
    
 
 <div id="panel1" class="panel panel-default">

       <div class="panel-heading" style="color:white;font-size:11pt;font-family:Arial, Helvetica, sans-serif;">abc</strong>
           <span class="pull-right clickable" > <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><i style="color:white;" class="glyphicon glyphicon-chevron-up"></i></a></span> 
       </div>
      
     <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
              
             <div>                 
                   <div class="form-group col-md-4"> 
                                 <label for="acctname"  class="control-label">Select Account Name</label>
                                      <apex:inputfield value="{!opp.abc}" id="acctName2" styleclass="form-control" />

                   </div>                
             </div>
      </div>
</div>  
</div>