validation on onClick of apex:Commandlink

Question

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 
        }
     }
}

Answer 1

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();"