2

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.

1

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;
}
0

Validation rules messages will appear immediately if the field is standard but if it is coming from a custom lightning component, you will have to build the logic yourself. The validation rule message will still appear but it will be during the DML operation. So you if want to the message to be shown just like how standard validation messages appear, you will have to use JS.

  1. Save the 2 values (FoodItem__c & Ingredients__c) on seperate aura:attributes, and a placeholder for the error message to display.
  2. Create a function (e.g. checkIfIngredientsIsRequired) that checks the food item if its equal to "Italian" and if ingredients is blank and if so, set the error with the validation message.

Please bear with this code, it may be buggy. The point is to give you idea on what to do:

<aura:attribute name="foodItem" type="String"/>
<aura:attribute name="ingredient" type="String"/>
<aura:attribute name="errors" type="String"/>

<ui:inputSelectOption value="{!v.foodItem}" select="{!c.isIngredientRequired}/>
<ui:inputTextArea value="{!v.ingredient}" errors="{!v.errors}"/>

isIngredientRequired : function(component, event, helper) {
     if (component.get("v.foodItem") == 'Italian' && component.get("v.ingredient") == null) {
              component.set("v.errors", "As per your choice of food, please provide additional info here!");
     }
}

Please mark as best answer if it helps you solve the problem. Thanks,

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.