[SalesForce] problem using javascript with commandButton

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.

Best Answer

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>
Related Topic