enter image description hereI am facing an issue with below code. Required attribute on lightning:input is not working on rerender. I have an inputCheckbox and I render the lightning:input field upon checkbox selection. This is working fine and page is throwing an error when field is not updated with a value and click on Submit button. problem is uncheck the checkbox -> Check it again -> lightning input rendered -> Did not enter any value -> click submit -> validation does not trigger and no error.


<div class="rootDiv">
    <div class="slds-text-body_small" style="display:flex;">
        <lightning:layout horizontalAlign="left">
            <lightning:layoutItem size="12">
                <div style="margin-left:0px !important;">
                    <ui:inputCheckbox aura:id="ProjectInfoId" value="{!v.case.field__C}"
                    <aura:unescapedHtml value="label"/>
    <aura:renderIf isTrue="{!v.showhideSection4elements}">
        <div class="slds-size_2-of-2">
            <div class="slds-text-body_small">
                <aura:unescapedHtml value="{!$Label.c.labelValue}"/>
            <div class="slds-form__row">
                <div class="slds-form__item" role="listitem">
                    <div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-form-element_1-col">
                        <label class="slds-form-element__label slds-text-body_small">
                            <aura:unescapedHtml value="{!$Label.c.fieldLabelValue}"/>
                        <div class="slds-form-element__control slds-size_3-of-4">
                            <lightning:input aura:id="SecIVrequiredCheckID" class="field"
                                             value="{!v.case.customfield__c}" maxlength="255" required="true"/>
    <div class="slds-form-element slds-form-element_horizontal slds-is-editing slds-form-element_1-col">
        <div style="text-align: center;">
            <button class="slds-button slds-button--brand" onclick="{!c.submitCase}">Submit</button>


var projectSelected = component.get("v.case.DRMS_Is_this_Project_Request__c");
        if (projectSelected) {
            var allValid = component.find("SecIVrequiredCheckID").reduce(function (validSoFar, inputCmp) {
                return validSoFar && !inputCmp.get("v.validity").valueMissing;
            }, true);

            if (allValid) {
                return true;
            } else {
                //validation errors
        } else {
            return true;

When I inspect the element in Dev tools, I found required attribute on lightning:input goes away on rerender.

This code runs on public site and I dont think that would affect the logic. Could you please help on this.

  • aura:renderIf is deprecated. Have you tried similar logic using aura:if? Does it present the same issue?
    – user72164
    Sep 25, 2019 at 20:29
  • @ChrisJohnson. I have tried with aura:if and it resolved the issue. After looking at the aura:if docs, it says aura:if instantiates and renders the component where as aura:renderIf only renders the component. i have updated all my logic with aura:if .Thanks much.
    – user58258
    Sep 26, 2019 at 16:44
  • @ChrisJohnson. Could you please write up an answer for this.
    – user58258
    Sep 30, 2019 at 13:10

1 Answer 1



aura:renderIf is deprecated... Salesforce recommends using aura:if instead. As you mentioned, aura:if instantiates and renders the component. aura:renderIf only renders it.

For those that may read this later... on the flip side of this... if you would like to have an object instantiated but don't want it rendered, you can do so with CSS classes. Create a class that has "display:none". You can then use attribute binding or Javascript to add/remove the class from the element you wish to make visible/hidden. This can come in handy when you don't want to dynamically create a component on the page but still need access to its attributes/methods right away.


You must log in to answer this question.