onchange not get fire on selection of 'none' from picklist when make field required =true

Question

Please find the code

<apex:page standardController="Case" extensions="demoCaseController" sidebar="false" showHeader="false" cache="true" id="page">
<apex:form id="theForm">
    <apex:pageMessages />
    <apex:pageBlock title="Partner Support Form" mode="edit" id="pb">
        <apex:pageBlockSection columns="1" title="Additional Details" id="otherDetails">
            <apex:pageBlockSectionItem id="interfaceSection">
                <apex:outputLabel value="{!$ObjectType.case.fields.Interface__c.Label}"/>
                <apex:actionRegion >
                <apex:inputField value="{!case.Interface__c}" style="width: 126px;" id="interface" required="true">
                 <apex:actionSupport event="onchange" reRender="detailedFields" action="{!displayAdditionalDetails}"  /> 
                </apex:inputField>
                </apex:actionRegion>
            </apex:pageBlockSectionItem>

            <apex:outputPanel id="detailedFields" >
            <apex:pageBlockSection id="detailedFields1" columns="1"  >

               <apex:outputText value="test" />
            </apex:pageBlockSection>
          </apex:outputPanel>

        </apex:pageBlockSection>  
        <apex:pageBlockButtons location="bottom">
            <apex:commandButton onclick="isValidCaptcha(); return false;" value="submit" id="validateButton"/> 
        </apex:pageBlockButtons>
            <apex:actionFunction name="createCaseAction" action="{!createCase}"/>
</apex:pageBlock>   
</apex:form>
</apex:page>

Controller

    public class demoCaseController {
    public case cs;
    public demoCaseController(Apexpages.Standardcontroller stdController) {
        this.cs = (Case)stdController.getRecord();
    }

    public pagereference createCase() {
    return null;
    }

    public pagereference displayAdditionalDetails() {
    system.debug('test ::  '+ cs.Interface__c);
    return null;
    }
}

I have to output panel blank when user select 'None' value from dropdown. In my code whenever I select 'None' value, function wrote on onchange is not get fired (my requirement is picklist filed is required on page).

Answer 1

This is what is happening in your case:

1) When you select 'none' value from drop down it tried to calls the actionSupport function
2) To do so, it collects the updated view state encrypt it and post it back to SFDC
3) SFDC then receive the view state and decrypt the view state and find that required field is missing and throws error.

You can see this error in debug logs.

VF_PAGE_MESSAGE You must enter a value  
VF_PAGE_MESSAGE Interface: You must enter a value

If you move your pageMessages tag in detailedFields you will be able to see on screen too.

Solution to this problem: make this field as non required on schema and just apply CSS to look like required field in VF. Make sure you add custom validation to check that user enter value in this.