+ Start a Discussion
❤Code❤Code 

apex:actionsupport rerender issue with multiple required fields

When I rerender a selectlist id's and a field is required but not filled, then an error is displayed on page. I don't want these errors untill I click on save button. So, for this i added <apex:actionregion> tag which prevented this, but the formatting got disturbed. 

Below is thw code where rerender happens -

<apex:actionregion >
    <apex:pageBlockSectionItem >
   <apex:outputLabel value="{!$ObjectType.RFP__c.Fields.Country__c.Label}" />
    <apex:outputPanel id="countries" layout="block"  styleClass="requiredInput">
    <apex:outputPanel id="countr" layout="block"  styleClass="requiredBlock"/>

    <apex:selectList value="{!discountScheduleID}" size="1" styleClass="fullWidth chzn-select">
            <apex:actionSupport event="onchange" action="{!FindAllName}" rerender="geographies" oncomplete="renderChosen()" />
            <apex:selectOptions value="{!dept}" />
    </apex:selectList> 

    </apex:outputPanel>

    </apex:pageBlockSectionItem>
    <apex:pageBlockSectionItem >
    <apex:outputLabel value="{!$ObjectType.RFP__c.Fields.Geography__c.Label}" />
    <apex:outputPanel id="geographies" layout="block"  styleClass="requiredInput">
    <apex:outputPanel id="geos" layout="block"  styleClass="requiredBlock"/>

    <apex:selectList value="{!selectedGeographyIds }" multiselect="true" id="selectedGeographies" styleClass="fullWidth chzn-select" >
            <apex:selectOptions value="{!AllName}" id="movieTextBox"></apex:selectOptions>
        </apex:selectList>

        <apex:outputPanel layout="block" styleClass="errorMsg" >
                            <apex:outputText value="{!errorMap['selectedGeographies']}" 
                                escape="false" rendered="{!errorMap['selectedGeographies'] != ''}" />
    </apex:outputPanel>
    </apex:outputPanel>
    </apex:pageBlockSectionItem>
    </apex:actionregion>

It should be like below - 

User-added image

But it is looking like this - 

User-added image

Regards
Neetu_BansalNeetu_Bansal
Hi,

Try this code:
<apex:actionregion >
	<apex:pageBlockSectionItem >
		<apex:outputLabel value="{!$ObjectType.RFP__c.Fields.Country__c.Label}" />
		<apex:outputPanel id="countries" layout="block"  styleClass="requiredInput">
			<apex:outputPanel id="countr" layout="block"  styleClass="requiredBlock"/>
			<apex:selectList value="{!discountScheduleID}" size="1" styleClass="fullWidth chzn-select">
				<apex:actionSupport event="onchange" action="{!FindAllName}" rerender="geographies" oncomplete="renderChosen()" />
				<apex:selectOptions value="{!dept}" />
			</apex:selectList> 
		</apex:outputPanel>
	</apex:pageBlockSectionItem>
</apex:actionregion>
<apex:actionregion >
	<apex:pageBlockSectionItem >
		<apex:outputLabel value="{!$ObjectType.RFP__c.Fields.Geography__c.Label}" />
		<apex:outputPanel id="geographies" layout="block"  styleClass="requiredInput">
			<apex:outputPanel id="geos" layout="block"  styleClass="requiredBlock"/>
			<apex:selectList value="{!selectedGeographyIds }" multiselect="true" id="selectedGeographies" styleClass="fullWidth chzn-select" >
				<apex:selectOptions value="{!AllName}" id="movieTextBox"></apex:selectOptions>
			</apex:selectList>

			<apex:outputPanel layout="block" styleClass="errorMsg" >
                <apex:outputText value="{!errorMap['selectedGeographies']}" 
                                escape="false" rendered="{!errorMap['selectedGeographies'] != ''}" />
			</apex:outputPanel>
		</apex:outputPanel>
    </apex:pageBlockSectionItem>
</apex:actionregion>
Let me know, if you need any other help.

Thanks,
Neetu
❤Code❤Code
Hi Neetu.. Thanks for the code. But still the UI deformation is happening..