If statement on visualforce command button

Question

I'm trying to write an if statement logic on the action value of a command button on VF page. I'm not sure if this is possible, what the right syntax is because I'm still getting an error. The goal is to validate if a user fills out specific fields on the vf page where an error pops up to tell them they are missing specific fields and it should block users from saving the record. The current behavior, error window pops up, but it still allows them to save. Any insight is appreciated.

<script type="text/javascript">
    function validateType() {
        var error = FALSE; 
        var valType ='{!Opportunity.Initial_Follow_Up_Type__c}';
        var valDate ='{!Opportunity.Follow_Up_Date__c}';
        var valTime ='{!Opportunity.Appointment_Time__c}';
        var valTimeofDay ='{!Opportunity.Follow_Up_Time_of_Day__c}';
        if((valType=="Email" || valType=="Phone") && valDate=="" && valTime=="" && error==TRUE){
            alert("If Initial Follow Up Type = Phone/Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank");
        }
    }
</script>

VF button code:

<apex:pageBlock id="pageBlock2" title="SDR-BDR Qualification Criteria">
    <apex:pageMessages />
    <apex:pageBlockButtons location="bottom">
        <apex:commandButton id="btnUpdate" onclick="validateType();" action="{! IF(error==FALSE,{!Save},NULL)}" status="status" value="Update Opportunity"/>
        <apex:commandButton id="btnCance" action="{!Cancel}" value="Cancel"/>
    </apex:pageBlockButtons>
</apex:pageBlock>

Answer 1

Add return statement as your last statement in validateType JS function

// Code: return error;

Validate in onclick attribute. Not in action attribute in commandButton.

// Code: onclick="if (validateType() === true) { return false; }" action="{!Save}"

RESULT: By doing this, if any custom error(business rules) in JS function, commandbutton will not execute the action method.

<script type="text/javascript">
    function validateType() {
        var error = FALSE; 
        var valType ='{!Opportunity.Initial_Follow_Up_Type__c}';
        var valDate ='{!Opportunity.Follow_Up_Date__c}';
        var valTime ='{!Opportunity.Appointment_Time__c}';
        var valTimeofDay ='{!Opportunity.Follow_Up_Time_of_Day__c}';
        if((valType=="Email" || valType=="Phone") && valDate=="" && valTime=="" && error==TRUE){
            alert("If Initial Follow Up Type = Phone/Email, Follow Up Date is Required, Follow Up Time of Day is Required, and Appointment Time should be blank");
        }
        return error;
    }
</script>

<apex:pageBlock id="pageBlock2" title="SDR-BDR Qualification Criteria">
    <apex:pageMessages />
    <apex:pageBlockButtons location="bottom">
        <apex:commandButton id="btnUpdate" onclick="if (validateType() === true) { return false; }" action="{!Save}" status="status" value="Update Opportunity"/>
        <apex:commandButton id="btnCance" action="{!Cancel}" value="Cancel"/>
    </apex:pageBlockButtons>
</apex:pageBlock>