function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KimKim 

Javascript Validation on Visualforce Page

Hello,

Need help on javascript validation on a visualforce page. The VF page itself is using the standard controller for Opportunity. I'm new to vf page and js, so I'm unsure what I'm missing. Any feedback is appreciated. 

<script>
    function validateType(){
        var valType = document.getElementById'{!$Component.form.pageBlock2.initialFollowType.outputType.Type}').value;
if(valType.value=="Email")
            {
                alert("If Initial Follow Up Type = Phone or Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank");
                return false;
            }else
            {
              if(valType =="Phone"&& valDate ==NULL && valTimeofDay ==NULL && valTime !=NULL)
              {
                    alert("If Initial Follow Up Type = Phone or Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank");
                    return false;
              }
             }return true;        
                            
     </script>
Shruti SShruti S
The mistakes in the code are - 
  1. You have to specify the type attribute for the script tag.
  2. The function can be declared as shown below 
    var fnName = function() {} );
  3. The id in should be enclosed in simple parenthesis. Like -   
    document.getElementById( id ).value;
  4. You can use else if instead of putting if inside the else.
Here is the corrected JavaScript code -  
<script type="text/javascript">
    var validateType = function() {
        var valType = document.getElementById( "{!$Component.form.pageBlock2.initialFollowType.outputType.Type}" ).value;
        
        if( valType === "Email" ) {
            alert( "If Initial Follow Up Type = Phone or Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank" );
            
            return false;
        }
        else if( 
            valType         === "Phone" &&
            valDate         === null    &&
            valTimeofDay    === null    &&
            valTime         !== null
        ) {
            alert( "If Initial Follow Up Type = Phone or Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank" );
                
            return false;
        }

        return true;
    };
</script>
Note: If the valDate, valTimeofDay and valTime variables are not declared, please declare it immediately after the function's open curly bracket.
KimKim

Thank you for providing the points that I was missing on the js script. I've updated it on the vf page and declared the missing variables for valDate, valTimeofDay, and valTime; but I'm still unable to get the validation to work. I'm unsure if I'm missing/mapping the heirarchy incorrectly on the actual vf page code. 

Here's the update js script. 
<script type="text/javascript">
    var validateType = function() {
        var valType = document.getElementById( "{!$Component.form.pageBlock2.initialFollowType.outputType.Type}" ).value;
        var valDate = document.getElementById( "{!$Component.form.pageBlock2.followUpDate:Date}" ).value; 
        var valTime = document.getElementById( "{!$Component.form.pageBlock2.apptTime:Time}" ).value; 
        var valTimeofDay = document.getElementById( "{!$Component.form.pageBlock2.followUpTimeDay:TimeofDay}" ).value;                                     
        if(valType.value=="Email"){
        alert("If Initial Follow Up Type = Phone or Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank");
                return false;
            }else if(valType =="Phone"&& valDate ==NULL && valTimeofDay ==NULL && valTime !=NULL){
            alert("If Initial Follow Up Type = Phone or Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank");
                return false;
            } 
                return true;
            };        
                            
     </script>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Here's the vf page code from where I'm pulling the variable values/IDs. 
<apex:form id="form">           
    <apex:pageBlock id="pageBlock2" title="SDR-BDR Qualification Criteria">
        <apex:pageMessages />
        <apex:pageBlockButtons location="bottom">
            <apex:commandButton id="btnUpdate2" action="{!Save}" status="status" value="Update Opportunity"/>
            <apex:commandButton id="btnCance2" action="{!Cancel}" value="Cancel"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection >
            <apex:pageBlockSectionItem id="initialFollowType">
                <apex:outputLabel id="outputType" value="Initial Follow Up Type: " />
                <apex:inputField id="Type" value="{!Opportunity.Initial_Follow_Up_Type__c}" required="true"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="followUpDate">
                <apex:outputLabel value="Follow Up Date: " />
                <apex:inputField id="Date" value="{!Opportunity.Follow_Up_Date__c}"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="apptTime">
                <apex:outputLabel value="Appointment Time: " />
                <apex:inputField id="Time" value="{!Opportunity.Appointment_Time__c}"/>
            </apex:pageBlockSectionItem>
            <apex:pageBlockSectionItem id="followUpTimeDay">
                <apex:outputLabel value="Follow Up Time of Day: " />
                <apex:inputField id="TimeofDay" value="{!Opportunity.Follow_Up_Time_of_Day__c}" required="true"/>
            </apex:pageBlockSectionItem>
Sitarama MurthySitarama Murthy
Hi Kim,

You need to Call the Javascript function from the VF page u have.

create any button and call the JS Function in order to validate ur VF page.


Thanks,
Ram