Add Validation Functions to Custom Screen Components


With the introduction of this new attribute, custom validation can now be added to the custom screen components

Using the new validate feature is quite simple and involves the following steps

1- Add the validate attribute to the component and make sure the type in Aura.Action.

<aura:handler name="init" value="{!this}" action="{!c.init}"/> 

2- The definition of the validate attribute must be set in the controller init method.

    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.*/' 

The validate method would be called when the user clicks on next or when a component runs the navigate function.

Return Values
The validation function returns 2 parameters:

  • isValid
  • errorMessage

If isValid is set to false, the attempt to proceed is canceled, and the value of errorMessage is displayed.