[SalesForce] Using action and onclick together on command button

I have to call an apex function only when javascript validation passes.
Hence,initially I tried the below code:

<apex:commandButton value="Submit" onclick="return addDomain();" action="{!submitRecord}" rendered="{!engCollabCon.id==null}" styleClass="green-btn btn submit" reRender="collabPanel,pageMessage" status="LoadingStatusSpinner">
    <apex:param value="submit" name="submit" assignTo="{!action}" />
</apex:commandButton>

JS:

function addDomain(){
    var regExpr = new RegExp('^[a-zA-Z0-9.-]+$');
     if(!($( "input[id$='domaininputfield']" ).val() == null || $( "input[id$='domaininputfield']" ).val() == '' ))   {
          var input = $("input[id$='domaininputfield']").val();
          if(!regExpr.test(input)){
               alert('The Domain name only allows alphanumeric and "."');
               $("input[id$='domaininputfield']").val('');
               return false;
          }
          else{

              return true;
          }
      }
      else{
          alert('Please enter a domain name');
          return false;
      }
}

This did not call the apex. Hence I tried to use action function instead :

<apex:commandButton value="Submit" onclick="addDomain();"  rendered="{!engCollabCon.id==null}" styleClass="green-btn btn submit" reRender="collabPanel,pageMessage" status="LoadingStatusSpinner"/>
<apex:actionFunction name="backendAction" action="{!submitRecord}" reRender="collabPanel,pageMessage" status="LoadingStatusSpinner">
      <apex:param value="submit" name="submit" assignTo="{!action}" />
</apex:actionFunction>

JS:

function addDomain(){
            var regExpr = new RegExp('^[a-zA-Z0-9.-]+$');
            if(!($( "input[id$='domaininputfield']" ).val() == null || $( "input[id$='domaininputfield']" ).val() == '' ))   {
                var input = $("input[id$='domaininputfield']").val();
                if(!regExpr.test(input)){
                    alert('The Domain name only allows alphanumeric and "."');
                    $("input[id$='domaininputfield']").val('');

                }
                else{

                backendAction();


                }
            }
            else{
                alert('Please enter a domain name');

            }
        }

This is making the apex call after unsuccessful JS validation as well.

Best Answer

If you want to abort the action, return a value. If you do not want to abort the action, do not return a value.

Example:

<apex:commandButton value="Do Something" 
                    onclick="if(!confirm('Are you sure?')) return false;" />

Replace "confirm" with your custom logic, this was a simple copy-paste example to get you started.

To modify your example:

<apex:commandButton value="Submit" onclick="if(!addDomain()) return false;"
                    action="{!submitRecord}" rendered="{!engCollabCon.id==null}" 
                    styleClass="green-btn btn submit" reRender="collabPanel,pageMessage" 
                    status="LoadingStatusSpinner">
    <apex:param value="submit" name="submit" assignTo="{!action}" />
</apex:commandButton>
Related Topic