problem using javascript with commandButton

Question

I have simple javascript function that is called from the commandButton that does a simple validation check on a zipcode input. If there is a validation error I return false and if there is no validation error, I return true. However, if the function returns true, my action method on the commndButton does not execute. I cannot figure out why?

Here is my code:

<apex:page controller="BenefitPlanProvidersController" sidebar="false" showHeader="false"> 
<apex:includeScript value="{!URLFOR($Resource.JQueryUI_1111, '/js/jquery-1.11.1.min.js')}" /> 

<script type="text/javascript">
function validateZip()
{
    var zip = document.getElementById('{!$Component.theForm.thePageBlock.theSection.ZipCodeItem.ZipCodeFilter}').value;
    var reg = /^[0-9]+$/;
    var isValid = true;
    if(typeof zip.value !== 'undefined') {
        if((zip.length) < 5 || (zip.length) > 5 ) {
            isValid = false;
            alert("zip code length is not 5");
        }
        if (!reg.test(zip)){
            isValid = false;
            alert("zip is not digits");
        }
    }
    if(!isValid) {
        alert("zip is not valid. Stop processing!!!!");
        return false;
    }  
    else {
        alert("we are here");
        return true;
    }  
}  


</script>

<style type="text/css">
    #title {font-size: 1.5em; margin: 15px auto; text-align:center; }
    [id*=bottomNavFooter] { background-color:#F2F3F3;padding:5px; }
    .paginator .prevNextLinks { color: #333333; }
</style>

<apex:form id="theForm">
    <p id="title">{!$Label.BenefitPlanProvidersPageTitle}</p>       

    <apex:pageBlock title="Search Options" mode="edit" id="thePageBlock">
        <apex:pageBlockButtons location="bottom" id="theButtons">
            <apex:commandButton value="Search" action="{!filterRecords}" reRender="theForm" id="theFilterButton" onclick="return validateZip();"  />
            <apex:commandButton value="Clear Search" action="{!filtersCleared}"  reRender="theForm" />
        </apex:pageBlockButtons>
        <apex:pageBlockSection columns="3" id="theSection">
            <apex:pageBlockSectionItem id="lastNameItem" labelStyle="width:30%;" dataStyle="width:10%;">
                <apex:outputLabel for="lastNameFilter">Last Name</apex:outputLabel>
                <apex:inputText id="lastNameFilter" value="{!lastname}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="ZipCodeItem" labelStyle="width:10%;" dataStyle="width:10%;">
                <apex:outputLabel for="ZipCodeFilter">Zip Code</apex:outputLabel>
                <apex:inputText id="ZipCodeFilter" value="{!zipcode}" />
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="physicianSpecialtyItem" labelStyle="width:10%;" dataStyle="width:30%;">
                <apex:outputLabel for="physicianSpecialtyFilter">Physician Specialty</apex:outputLabel>
                <apex:selectList id="transactionTypeFilter" value="{!physicianSpecialty}" size="1">
                    <apex:selectOptions value="{!PhysicianSpecialties}"/>
                </apex:selectList>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>

    <apex:pageBlock id="resultsPageBlock">
        <apex:pageMessages id="messages"/>
        <apex:pageBlockTable value="{!Contacts}" var="c">
            <apex:column headerValue="Last Name">
                <apex:outputField value="{!c.LastName}" />
            </apex:column>
            <apex:column headerValue="First Name">
                <apex:outputField value="{!c.FirstName}" />
            </apex:column> 
            <apex:column headerValue="Medical Practice">
                <apex:outputField value="{!c.Account.Name}" />
            </apex:column>          
            <apex:column headerValue="Street">
                <apex:outputField value="{!c.MailingStreet}" />
            </apex:column>
            <apex:column headerValue="City">
                <apex:outputField value="{!c.MailingCity}" />
            </apex:column>
            <apex:column headerValue="State">
                <apex:outputField value="{!c.MailingState}" />
            </apex:column>
            <apex:column headerValue="Postal Code">
                <apex:outputField value="{!c.MailingPostalCode}" />
            </apex:column>
            <apex:column headerValue="Physician Specialty">
                <apex:outputField value="{!c.Physician_Specialty__c}" />
            </apex:column>
        </apex:pageBlockTable>
    </apex:pageBlock>

    <apex:outputPanel rendered="{!IF(hasNext || hasPrevious, true, false)}">
        <div class="bottomNav" id="bottomNavFooter">
            <div class="paginator">
                <span class="prevNextLinks">
                    <span class="prevNext">
                        <apex:commandLink id="first" action="{!first}" reRender="pageNumbers, resultsPageBlock"><img class="first" alt="First Page" src="/s.gif" /></apex:commandLink>
                    </span>
                    <span class="prevNext">
                        <apex:commandLink id="prev" action="{!previous}" reRender="pageNumbers, resultsPageBlock"><img class="prev" alt="Previous" src="/s.gif" /></apex:commandLink>
                        Previous
                    </span>
                    <span class="prevNext">
                        Next&nbsp;
                        <apex:commandLink id="next" action="{!next}" reRender="pageNumbers, resultsPageBlock"><img class="next" alt="Next" src="/s.gif" /></apex:commandLink>
                    </span>
                    <span class="prevNext">
                        <apex:commandLink id="last" action="{!last}" reRender="pageNumbers, resultsPageBlock"><img class="last" alt="Last Page" src="/s.gif" /></apex:commandLink>
                    </span>
                    <apex:outputPanel id="pageNumbers" >
                        <span class="right">
                            Page {!pageNumber} of {!totalPages}
                        </span>
                    </apex:outputPanel>
                </span>
            </div>
        </div>
    </apex:outputPanel>
</apex:form>

Thanks in advance for any help. Regards.

Answer 1

Your command button action will execute regardless of the javascript outcome, they don't go together quite well. What I would suggest is, to have a normal html input button from which you'll trigger your javascript validation function, then from within there call an apex action function that will call your apex method. Something like this:

<apex:form>
    <script>
        function validate()
        {
            if (true)
            {
                validateInApex();
            }
            else
            {
                // something else
            }
        }
    </script>

    <apex:actionFunction name="validateInApex" action="{!validateInApex}" rerender="someSection" status="loadingStatus"/>
    <input type="button" class="btn" onclick="validate();" />
</apex:form>

Answer 2

You only want to execute a return statement from the onclick if there is a problem.

When there is no problem you need to not return, so that subsequent button click behavior takes place in the browser. Salesforce takes your custom onclick script and appends its own script to the end of it when it is rendered to the browser. When you return early, you're stopping the default behavior from executing.

You should alter your button's onclick to only return under the condition that there is a problem otherwise continue normally.

<apex:commandButton value="Search" action="{!filterRecords}" reRender="theForm" id="theFilterButton" onclick="if (validateZip() === false) { return false; }" />