1

I am trying to validate a checkbox is checked on click of a apex commandlink. I am using SLDS styling on the page and the problem seems to be with the SLDS checkbox. I am using the below code as specified in https://www.lightningdesignsystem.com/components/checkbox/ When I check the idChkbox, the onClick function always prints 'idChkbox Unchecked' alert. After digging a bit more on SLDS checkbox, found this SLDS-checkbox thread. I am still not able to get the proper state of checkbox.

My Checkbox Code:

        <div class="slds-form-element">
    <div class="slds-form-element__control">
        <span class="slds-checkbox">
            <input type="checkbox" name="options" id="idChkbox" value="{!confirm}" rendered="{!renderConfirm}" />
            <label class="slds-checkbox__label" for="idChkbox">
                <span class="slds-checkbox_faux"></span>
                <span class="slds-form-element__label">my label here</span>
            </label>
        </span>
    </div>
 </div>

Commandlink code:

          <apex:commandLink id="selectLink" onclick="return jsFunction('{!record.id}')" action="{!save}" styleClass="cmdLink"> Select   
<apex:param name="streetAddr" value="{!record.strretAddr}" />
<apex:param name="cityName" value="{!record.cityName}" />
<apex:param name="zipCode" value="{!record.zipCode}" />

jsFunction:

function jsFunction(element){
    if(element != null){
        var valConfirm = j$('[id$=idChkbox]').prop('checked');
        if(!j$('[id$=idChkbox]').is(':checked')){
            alert (' idChkbox Unchecked ' );
            valConfirm = false;
            document.getElementById('error_wrapper').style.display = 'block';
        }
        else{
            alert (' Confirm Checked ' + valConfirm);
            setConfirm(valConfirm); // my actionFunction which sends the value of confirm to controller 
        }
     }
}
1
  • Can you edit your question and post the myJSFunction script as well as the VF tag for the checkbox? Both are pretty critical to the discussion.
    – Mark Pond
    Mar 29 '18 at 21:47
0

You need to use apex:outputText and apex:inputCheckbox to make the differences between SLDS and Visualforce work. Here's an updated version of your code:

<apex:outputText rendered="{!renderConfirm}">
    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <span class="slds-checkbox">
                <apex:inputCheckbox id="idChkbox" html-data-id="confirm" value="{!confirm}"  />
                <apex:outputLabel styleClass="slds-checkbox__label" for="idChkbox">
                    <span class="slds-checkbox_faux"></span>
                    <span class="slds-form-element__label">my label here</span>
                </label>
            </span>
        </div>
    </div>
</apex:outputText>

Which you can then verify via JavaScript:

function jsFunction(element){
  if(document.querySelector('[data-id=confirm]:checked')) {
    // box is checked
  } else {
    // Box is not checked
  }
}

If you don't want to use JavaScript at all, then you simply need to check in your JavaScript code:

if(!confirm) {
  ApexPages.addMessage(
    new apexpages.message(
      apexpages.severity.error,
      'You must confirm your selection')));
} else {
  // box was checked
}

Please note that this means you'll need to change how your page is laid out, because server-side code cannot directly manipulate the DOM.


Original Answer Before Edit:

apex:param is going to submit the parameter to the server. It has absolutely nothing to do with the onclick handler. A merge field won't help anyways, because it wouldn't be rendered until after the command returns from the server.

What you need to do is get the value in your myJSFunction directly. What this means depends on the type of data you're using, but would generally look like this:

function myJSFunction() {
  var value = document.getElementById("{!$Component.path.to.field}").value;
  if(!value) {
    alert("No value provided");
    return false;
  }
}

To prevent the value from going to the server in an invalid state, you also need to return the return value from the method back to the handler:

onclick="return myJSFunction();" 
7
  • For better understanding of the issue, I have edited the original question with code snippets. I would like to avoid javascript altogether if possible.
    – Quest_sfdc
    Mar 30 '18 at 17:08
  • @Madhu7 Edited...
    – sfdcfox
    Mar 30 '18 at 17:24
  • Thank you @sfdcfox. I believe I should call js function on onClick of commandlink and not on the lick of checkbox, is that right? But I am not sure why the controller method is not invoked when checkbox is checked.
    – Quest_sfdc
    Mar 30 '18 at 22:17
  • @Madhu7 Yes, that's correct. And as for that, I'm not sure. You'll need to do some debugging in your browser.
    – sfdcfox
    Mar 31 '18 at 0:11
  • 1
    @sfmk2017 Yes, the checkbox itself is replaced with some CSS magic, so that's why we need to use apex:outputText to control the rendering.
    – sfdcfox
    Apr 11 '18 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.