SLDS Tab Error msg issue in VF page

Question

I have created 4 SLDS Tabs in a Visualforce page and every tab contains some required fields which are generated by fieldset.

the problem is that when I clicking on NEXT button showing error messages which are belong to 2nd and 3rd tab.

How can avoid this issue? I want to show only current tab error messages. Please help me out this.

--VF Code Line -- --next button--

<a href="" class="slds-button slds-button_brand btn-tab-next-1 slds-float_right">Next</a>

-- fieldset code --

<apex:repeat value="{!leadFieldSetMap['Enrollment & Payment Information']}" var="field">         
    <div class="slds-col slds-size--1-of-1 slds-medium-size--6-of-12">
        <div class="slds-form-element slds-p-around--medium" style="padding: 0.3rem;">                                                                                                                        <label class="slds-form-element__label">
                {!field.label} 
            </label>                                                                                                                            

            <div class="slds-form-element__control">
                <apex:inputField styleClass="slds-select customValidationCls" style="padding-left: 0.5rem;" value="{!Lead[field.fieldPath]}" required="{!OR(field.required, field.dbrequired)}"/>        
            </div>
        </div>
    </div>                                                    
</apex:repeat>

--action function--

<apex:actionFunction name="firstNextTabFunction" action="{!firstNextTab}" reRender="errorPageMsg" status="IdStatus"/>

-- jquery--

j$('.btn-tab-next-1').click(function(){             
console.log('FirstNext In');
            var isValid = true;            
            if(isValid){                
                firstNextTabFunction();                          
                j$('#tab-default-2__item').trigger('click');              
   }
   //console.log('FistNext Out');
});

Answer 1

Visualforce doesn't know if a field can literally be seen by a user. If it's rendered in HTML, it assumes it can be seen, and is therefore required. There's a few ways around this, but the most typical is to use an apex:actionRegion. It's usually just as simple as putting the action region around the things you want to validate at the same time, and make sure your action function is in the same region; this will limit the code to just the current tab. They can be a little tricky to work with, though, but we have plenty of answers for you to look through if you get stuck.