Validate User Input for Custom Flow Screen Components

Add validation to your custom screen components.

To use flow’s validation capabilities, create a function called validate() in your component’s JavaScript file. For errorMessage, enter your custom error message.

1// sampleValidate.js
2@api
3validate() {
4  if(/* true conditions */) {
5    return { isValid: true };
6    }
7  else {
8    // If the component is invalid, return the isValid parameter
9    // as false and return an error message.
10    return {
11      isValid: false,
12      errorMessage: '/*A message that explains what went wrong.*/'
13    };
14  }
15}

Arrow function expressions don’t work for validation in components with a target of lightning__FlowScreen. For example, this arrow function expression does not work for flow screen validation:

1// sampleValidate.js - DOESN'T WORK
2@api
3validate = () => {
4  if(/* true conditions */) {
5    return { isValid: true };
6    }
7  else {
8    // This won't be recognized by Flow
9    return {
10      isValid: false,
11      errorMessage: '/*A message that explains what went wrong.*/'
12    };
13  }
14}

See Also