Add Validation Functions to Custom Screen Components

You can now add custom validation to your custom screen components.

Where: This change applies to Lightning Experience and Salesforce Classic in Essentials, Professional, Enterprise, Performance, Unlimited, and Developer editions. Screen components are supported only in Lightning runtime.

How: To provide validation support for a custom screen component, add a validate attribute of type Aura.Action to your component’s declarations. Use a controller init method to set the validate attribute to a function that carries out a validation determination. The function runs when the flow user clicks Next or when a component runs the navigate function. The validation function must return two parameters: isValid and errorMessage. If isValid is set to false, the attempt to proceed is canceled, and the value of errorMessage is displayed.

Here’s an example of how to implement validation support.

<aura:component implements="lightning:availableForFlowScreens" access="global"> 
    <!--When the component renders, it calls init handler.--> 
    <aura:handler name="init" value="{!this}" action="{!c.init}"/> 
    
    <!--Declare the validation attribute so it can store the validation logic.--> 
    <aura:attribute name="validate" type="Aura.Action"/> 
    
    <!-- component markup --> 
</aura:component>
({ 
    init: function(cmp, event, helper) { 
        // Set the validate attribute to a function that includes validation logic. 
        cmp.set('v.validate', function() { 
              if(/* true conditions */) { 
                  return { isValid: true }; 
              } 
              else { 
                  //If the component is invalid, return the isValid parameter as false and return an error message. 
                  return { 
                      isValid: false, 
                      errorMessage: '/*A message that helps your user enter a valid value or explains what went wrong.*/' 
                  }; 
              }}) 
        } 
})

Related Updates for Developers

Lightning Components
New validate attribute in the lightning:availableForFlowScreens interface.