1

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
  },
  • What is inputField in your JS Controller, where is it defined? – Jayant Das May 23 at 15:39
  • Thanks Jayant. I have edited the code and included the same. var inputField = component.find('INPUTtype'); Please have a look if possible – Mayank Parnami May 23 at 16:17
2

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.

  • event.getSource().setCustomValidity("Error Mesage"); is working fine but i want to display below checkbox not each checkbox. yes , working on re-validation during submit as well :) – Mayank Parnami May 23 at 18:36
  • 1
    You will need to clear any previous validation messages on other checkboxes and then show only for that particular checkbox, if that's what you mean. As mentioned in my answer, I will not recommend to go this route if you want to prompt your user to select one of the checkboxes on the onchange event instead use a validation on form submission where you can always show/hide a div using aura:if condition and by setting appropriate error message. – Jayant Das May 23 at 18:39

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.