How to validate custom Flow screen components in Flows – Part 1

Developing custom flow screen components is awesome! But, there is always a but, there is no out of the box validation feature available to validate them in flows.

But there is a cool feature, released in Winter 19, which let’s you add validation within your component.

So how exactly does it work?

Salesforce validates each flow screen when the user attempts to navigate to the next screen. If the flow screen is not valid, the user can’t progress. To validate the component with the flow screen, declare the validate attribute in the component. Set the validate attribute to a custom validation function that must return two parameters: isValid and errorMessage.

I created to small component to demo the same.

Component Markup: FlowScreenCMPsValidation.CMP

<aura:component implements="lightning:availableForFlowScreens" access="global">
    <!-- When the component renders, call the init handler. -->
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <!-- Attribute to store the validation logic in. -->
    <aura:attribute name="validate" type="Aura.Action" 
                    description="Custom validation function to run when the flow is navigated to the next screen. The function must evaluate the component and return values for isValid and errorMessage."/>
    <aura:attribute name="Name" type="String"/>
    <lightning:input type="text" label="What is your name?" value="{!v.Name}" required="true"/>

JS Controller: FlowScreenCMPsValidationController.js

    init: function(cmp, event, helper) {
       // Set the validate attribute to a function that includes validation logic
       cmp.set('v.validate', function() {
           var userInput = cmp.get('v.Name');
           if(userInput && userInput.length>0) {
               // If the component is valid...
               return { isValid: true };
           else {
               // If the component is invalid...
               return { isValid: false, errorMessage: 'A value is required.' };

Lights, Camera and Demo!

But! *arghh*, the ‘but’ again!
I noticed there are some limitations with this validation approach. When the user clicks next, the component rerenders and the that we pass is added at the end of the body of the component. And, because of this:

  • Previous inputs from user get lost when the component rerenders.
  • We cannot add multiple validations to individual field input, since the syntax only allows us to return a string for validation error.

We shall try to address these issues in our next post.

I did post an idea on the community for the same. Please upvote!

Thank you for being an awesome reader! Subscribe to this blog for all the updates delivered straight to your inbox. 🙂

17 thoughts on “How to validate custom Flow screen components in Flows – Part 1

  1. Pingback: Retain input values while validating custom Flow Screen Lightning components – Part 2 |  forcePanda

  2. Pingback: Adding Validation Errors on Individual Inputs in custom Flow Screen Components – Part 3 |  forcePanda

  3. Hi, I got this working for a custom input component to use for a flow. However I’m getting duplicate error messages displaying. One is the standard “complete this field” message when tabbing through a field (error message when blank) and then my validation message. Is it possible to hide the “complete this field” message? So only one error message always displays?


      • Sorry for the delayed response. I was able to get this working. It seems that the duplicate message errors are due to the onblur event (messageWhenValueMissing) when tabbing through the field (e.g. You must enter a value.. and field border changes to red) and then my custom validation message that appears below the component in the flow (which is based on your example above). I’m still learning about aura flow screen component validation and this tutorial has been a great start and thanks for sharing all the great content. Two things I’d like to add to my new validation logic:
        1) is there a way to change the field border change to red in color if my custom validation is triggered (not sure what the equivalent getelementbyId event is for aura)?
        2) Determine if I can clear my custom error using an onblur event?


  4. Hi,
    I would like to ask beside validating the inputs only from custom flow screen component, is it possible I can get or check the values not belong to custom flow screen component but inputs in the same screen? For example, the screen has standard inputs and custom flow screen component. When I put a value in standard inputs and I click the button from custom flow screen component, it will retrieve the value from standard inputs right away. Thank you so much.


      • Hi,
        I make a button in the custom flow screen component. When the user fill in value in the standard inputs and click the button. it will automatically create a record without clicking next. So I implement lighting:editForm, I wish standard inputs can be save in my attribute and i put theses attribute to be lightning:inputField value.

        if i want to use the values in the current screen, the standard input values are null even i put values when I click the button. so i was thinking is there any way like get current screen element in javascript in order to dynamically retrieve standard inputs values


  5. I had made a flow with standard element and in footer I have used custom footer but the problem is that the custom footer skip the standard element validation. Can we do something that custom footer restrict navigation if standard element’s validation is failed?


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.