Understanding reduce() and showHelpMessageIfInvalid() js controller methods

reduce and showHelpMessageIfInvalid methods are widely used with lightning:input component for validating forms. Let’s understand them using an example.

The following is an input form example with four fields:

<lightning:input aura:id="field" label="Last name" placeholder="Last name" required="true" /> 

<lightning:input aura:id="field" label="First name" placeholder="First name" required="true" /> 

<lightning:input aura:id="field" label="Email" placeholder="Email" required="true" /> 

<lightning:input aura:id="field" label="Phone" placeholder="Phone" required="true" /> 

since required is marked true, if the user doesn’t enter any value, the validity object for this input control will have value as valueMissing.

The other possible values are :

• badInput: Indicates that the value is invalid

• patternMismatch: Indicates that the value doesn’t match the specified pattern

• rangeOverflow: Indicates that the value is greater than the specified max attribute

• rangeUnderflow: Indicates that the value is less than the specified min attribute

• stepMismatch: Indicates that the value doesn’t match the specified step attribute

• tooLong: Indicates that the value exceeds the specified maxlength attribute

• typeMismatch: Indicates that the value doesn’t match the required syntax for an email or url input type

• valid: Indicates that the value is valid

• valueMissing: Indicates that an empty value is provided when required attribute is set to true

when a form is submitted or field validity code is triggered, below javascript controller code checks for validity of input components

({
    onClick: function (cmp, evt, helper) {

   var allValid = cmp.find('field').reduce(
                         function(validSoFar, inputCmp) 
            {
            inputCmp.showHelpMessageIfInvalid();

  return validSoFar && inputCmp.get('v.validity').valid;
         }, true);

         if (allValid) {
             alert('All form entries look valid. Ready to submit!');
         }

        else {
             alert('Please update the invalid form entries and try again.');
         }
     }
})

If you look at the above function reduce function is used again. just to break it down into smaller chunks to explain in detail

• Let’s say you have 4 lightning:input components with id as ‘field’, as shown in above form . component.find will return an array of 4 elements

Array.reduce will run for each element

The function inputCmp.showHelpMessageIfInvalid(); will check if the element is valid. If not, it will show the help message and the red border to highlight the field is invalid.

The third line 'return validSoFar && inputCmp.get('v.validity').valid;' is basically like an if and condition. So in this case , (‘ v.validity’).valid checks if the component is in a valid state.

v.validity is part of every lightning:input component to check for validity of the input component. Let’s say that a lightning:input is marked required and the user has not entered a value when this code runs, it will return false which basically means the component is not valid.

The return statement will return false even if one form component of your array fails for any of the invalidity status and overall allValid variable will become false.

Finally, the allValid will be false and an alert message will show in UI which indicates one more lightning:input tags are in invalid state. It means they have not entered data or they have not respected the fields formatter attribute etc.