[SalesForce] .set and .setCustomValidity not working for two checkboxes

I am trying to place a custom validation if atleast one of my checkboxes is selected or not. and show the relevant error message.

I am able to achieve this when there is only one checkbox , HOWEVER when there are TWO or more checkboxes coming , it does not work. It simply says inputField.set is not a function or inputField.setCustomValidity is not a function when debug goes there.

My research (apart from debugging) is as follows:-
Getting a Proxy object instead of an actual component attribute

lightning checkbox is not working

My component(view code) code is as follows:-

<aura:attribute name="INPUTTypeList" type="List" default="[]"/>
  <div class="slds-col--padded-medium "> 
            <span class="slds-m-bottom--xx-small">My INPUT Programs</span>
            <div  style="display: -webkit-inline-box;">
            <aura:iteration items="{!v.Common.INPUTType}" 
          var="item">
  <!-- not mentioning iteration logic as value is set from other component 
  and code here would become verbose, just for understandinding it is a list 
 coming from other component -->
                <lightning:input type="checkbox" label = "{!item}" 
 aura:id="INPUTtype" value="{!item}"  onchange=" 
  {!c.handleChangeINPUTType}" 
 /> 

            </aura:iteration>
            </div>
        </div>

Controller Code is as follows

       handleChangeINPUTType: function (component, event) {
   var capturedCheckboxName = event.getSource().get("v.value");
   var selectedCheckBoxes =  component.get("v.INPUTTypeList");
           if(selectedCheckBoxes.indexOf(capturedCheckboxName) > -1){            


  selectedCheckBoxes.splice(selectedCheckBoxes.indexOf( capturedCheckboxName 
   ), 1);           
    }
    else{
        selectedCheckBoxes.push(capturedCheckboxName);
    }
    component.set("v.INPUTTypeList", selectedCheckBoxes);
      //doubt STARTS HHERE

       if(selectedCheckBoxes.length <1)
    {
       // Debug comes here and works FINE only for one checkbox
       // debug comes here and THROWS EXCEPTION in case of 2 checkboxes
       // IT THROWS AN EXCEPTION AS SOON AS it encounters 'inputField'

        var inputField = component.find('INPUTtype');          

        inputField.set('v.validity','false');
        inputField.setCustomValidity("Select atleast one INPUT type");
        inputField.reportValidity();
    }
    else {

        inputField.set('v.validity','true');
        inputField.setCustomValidity('');
        inputField.reportValidity();
    }
   //doubt ends HHERE
  },

Best Answer

You are fetching the checkboxes in the JS as:

var inputField = component.find('INPUTtype');

which will return an array of the checkboxes with the aura:id="INPUTtype", and thus inputField.setCustomValidity() will not work. Custom validity (an HTML Constraint Validation) works on a particular element (or form) and not on array of elements.

You can only set the validity on a particular checkbox. And to do so, you will need to do something as:

var inputField = component.find('INPUTtype'); 
inputField[i].setCustomValidity("Error Message"); // where i is the array index

OR, you can use the exact checkbox which triggered this event

event.getSource().setCustomValidity("Error Mesage");

On a side note, using inputField.set('v.validity','true'); will not work as validity is a read-only attribute.

Considering you are attempting to let user select at least one of the checkboxes, the ideal way to handle this should be on form submission, where you can verify if one or none checkboxes are selected, then accordingly prompt the User to select at least one before submitting the form.

Related Topic