[SalesForce] Validation rule on Text area field on a Lightning component

How to implement custom validation rule on an input text field of a custom input Lightning component, based on value from input picklist field?

This is the validation rule I had on Salesforce classic(custom object definition)

AND(
ISPICKVAL( Picklist__c , "SelectedValue-01"),
ISBLANK( TextBox__c )
)

Error message must show up right above the Text box field: "As you have choosed: SelectedValue-01 value, this text box cannot be empty." How to implement this in a JS controller? I couldn't find any documentations for implementing this, any references would be really appreciated.

Referred this Salesforce Documentation which gave me some insight, but not a logical condition for validation rule on a text box based on a Picklist value.

Best Answer

Please try this:

Ltng Cmp:

<ui:inputSelect value="{!v.sobjectType.Picklist}"
                        label="Picklist label: " class="dynamic" 
                        aura:id="pickList"/>
<ui:inputTextArea value="{!v.sobjectType.Field}" 
                         class="slds-input" label="Text area label:" 
                         maxlength="200" aura:id="textArea" />
<lightning:button label="Submit" class="slds-m-top--medium"
                                      variant="brand"
                                      onclick="{!c.clickCreate}"/>

Ltng Controller JS

clickCreate: function(component, event, helper){
       if(helper.validateForm(component)){
          /* Do record creation */    
    }
}

Ltng Helper JS

validateForm: function(component){
        var validData = true; //Flag
        var pklstField = component.find(“pickList”);
        var pklstFieldData = pklstField.get("v.value");
        var txareaField = component.find(“textArea”);
        var txareaFieldData = txareaField.get("v.value");

    if( pklstFieldData == “Picklist value” && txareaFieldData == null){
        validData = false;
        txareaField.set("v.errors", [{message:”Text area cannot be empty.”}]);
    } else {
        txareaField.set("v.errors", null);
    }
 return validData;
}
Related Topic