Hello friends, In this post i am going to tell you about lightning:inputRichText component, a rich text editor that we used to add, edit, format, and delete rich text inside lightning component but when you try to make this element required using required="true" attribute this won't work. So here i am providing solution let's get started.

Make lightning:inputRichText required in lightning component

In salesforce mostly every lightning element has the required attribute to make them required but in the case of lightning:inputRichText element it doesn't work so use the following approach to get it resolved.

RichTextArea.cmp

 <aura:component implements="flexipage:availableForAllPageTypes" access="global" >
<aura:attribute name="validity" type="Boolean" default="true"/>
<aura:attribute name="myMessage" type="String" default=''/>
<lightning:layout>
<lightning:layoutItem padding="around-small" size="12">
<lightning:inputRichText aura:id="txtMsg" valid="{!v.validity}" value="{!v.myMessage}" placeholder="Type something interesting" required="true" onblur="{!c.handleblur}"/>
<br/>
<center>
<lightning:button variant="Brand" label="Click Me" onclick="{!c.handleClick}"/>
</center>
</lightning:layoutItem>
</lightning:layout>
</aura:component>
RichTextAreaController.js
 ({
handleblur: function(component, event, helper) {
if(!component.get("v.myMessage")){
component.set("v.validity", false);
}
else{
component.set("v.validity", true);
}
},

handleClick : function(component, event, helper) {
if(!component.get("v.myMessage")){
component.set("v.validity", false);
}
else{
component.set("v.validity", true);
}
}
})

Output:

Hope you like this post, for any feedback or suggestions please feel free to comment. I would appreciate your feedback and suggestions.
Thank you.