+ Start a Discussion
SunadminSunadmin 

Using javascript to validate zip code on visual force page

Hello,

 

I have a visual force page and apex controller I have been building to use for lead zip code searches. I was able to get the basic search to work but wanted to validate the input to verfiy they were only 5 digits. I have tried linking to my zip code validation rule but was having some difficulty with that. I have also tried setting up a pattern and matcher class in the controller, but could not get it to recognize a wild card search. Now I am working on a javascript validation. Here is my basic code to test the input and verfiy that it is a number:

       <script> var postalcode = '{!$Component.postalcode}' </script> 
        <script type="text/javascript"> 
        function validateText(numb){ 
            if(isNaN(parseInt(numb))) {alert("zip code is numbers only")  
            return false } 
            else  return true };
        </script>
        

 Here is the entire page including my Ajax/soap for the javascript&colon;

<apex:page controller="zipController">
<script src="/soap/ajax/15.0/connection.js" type="text/javascript"></script>
<script src="/soap/ajax/15.0/apex.js" type="text/javascript"></script>
    <apex:form >
     <apex:pageMessages />
        <apex:pageBlock mode="edit" id="block">
        <apex:pageBlockSection >
        <apex:pageBlockSectionItem >
    <apex:outputLabel for="searchText"> Enter zip code</apex:outputLabel>
        <apex:panelGroup >
        <apex:inputText id="searchText" value="{!searchText}"/>
        <apex:commandButton value="Go!" action="{!doSearch}"/>
        </apex:panelGroup>
        </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
        <apex:actionStatus id="status" startText="requesting..."/>
            <apex:pageBlockSection title="Lead Zip Code Search " id="results" columns="1">
            <apex:pageBlockTable value="{!results}" var="l"
                rendered="{!NOT(ISNULL(results))}">
                    <apex:column value="{!l.postalcode}"/>
                    <apex:column value="{!l.company}"/>
                    <apex:column value="{!l.name}"/>
                    <apex:column value="{!l.email}"/>
            </apex:pageBlockTable>
         </apex:pageBlockSection>
           </apex:pageBlock>
       </apex:form>
       
       <script> var postalcode = '{!$Component.postalcode}' </script> 
        <script type="text/javascript"> 
        function validateText(numb){ 
            if(isNaN(parseInt(numb))) {alert("zip code is numbers only")  
            return false } 
            else  return true };
        </script>
        
</apex:page>

I have inserted the javascript at various points on the page, just to see if it would test after or before the search but neither worked.  I have tried numerous approaches to solve the wildcard search and number validation issue, but have not had any luck. I have posted a previous message using a different approach with the controller. Any advice would be appreciated.

Thanks,

Best Answer chosen by Admin (Salesforce Developers) 
AvromAvrom

I don't see where you're calling validateText(). The most obvious place would be from the onchange attribute of the inputText:

 

 

<apex:inputText id="searchText" value="{!searchText}" onchange="return validateText(this.value);" />

 

 

That will trigger the validation as soon as the field loses focus (if it's actually changed).

 

An alternative would be to put that call in the onclick attribute of the commandButton; that would defer validation until someone actually tried to do the search.

 

All Answers

AvromAvrom

I don't see where you're calling validateText(). The most obvious place would be from the onchange attribute of the inputText:

 

 

<apex:inputText id="searchText" value="{!searchText}" onchange="return validateText(this.value);" />

 

 

That will trigger the validation as soon as the field loses focus (if it's actually changed).

 

An alternative would be to put that call in the onclick attribute of the commandButton; that would defer validation until someone actually tried to do the search.

 

This was selected as the best answer
SunadminSunadmin

Thanks Avrom,

 

That did it! I am going to run some more tests to verfiy I have a validation for range of zip codes.

stephanstephan

A slightly improved zip code validator would account for zip codes in 12345-4546 format as well. Here's a snippet to do that:

 

function isValidZipCode(value) {
   var re = /^\d{5}([\-]\d{4})?$/;
   return (re.test(value));
}

 

 

SunadminSunadmin

Thanks Stephen,

 

Could you tell me where to insert the rule on my vforce page? I tried something similar but could not get it to work, I dont think I had it testing the correct values.

 

 

stephanstephan

Sorry -- should have been more clear. The function I gave as an example can be used in place of your validateText function.

SunadminSunadmin

Thanks Stephen, I will take a look at it.