function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Nichelle HubleyNichelle Hubley 

use jquery validate plugin on visualforce page with fields not rendered

I'm using jquery validate plugin to validate a form on a visualforce page. 

Some fields are not rendered, so the code breaks when it gets to those rules. One field (id=select) renders either a set of business fields or personal fields. When the personal field validation code is written first, those fields validate. However, when the business fields validation code is written first, the personal fields do not validate.

For example the code below when the "select" field is set to "personal" the field "personalname1" renders and can be validated. When the field is set to "business" and the field "contactfirstname" renders it is not validated and the form can be submitted without content.

My assessment after some trouble shooting is that when fields aren't rendered, the validation script breaks and no fields further down on the page is validated. 

My question is - how can I validate just the fields that are rendered? 
<script type="text/javascript">
      var j$ = jQuery.noConflict();

        j$(document).on('keydown click change', function() {
        
        j$('[id$=newDGRecord]').validate();  
              
            j$('[id$=select]').rules("add",{
                required: true
            });
            j$('[id$=PersonalName1]').rules("add",{
                required: function() {
                  return j$('[id$=select]').val() == "Personal";
                    }
            });
            j$('[id$=ContactFirstName]').rules("add",{
                required: function() {
                  return j$('[id$=select]').val() == "Business";
                }
            });     
            
           j$('[id$=InsuranceHistory]').rules("add",{
                required: true
            });
            
            j$('[id$= TrueComplete]').rules("add",{
                required: true
            });

            /* Customised the messages */
            jQuery.validator.messages.required = "Please enter a value"; 
        });
        
     </script>