All mandatory fields are not showing up as mandatory in lightning component

Question

I am trying to check if a lightning field is filled bu a controller vallidation

 <lightning:input aura:id="fieldId" label="Policy Number"
                                                     name="policyNumber"
                                                     value="{!v.policyNumber}" required="true"/>

 <lightning:input aura:id="fieldId" label="Policy Number"
                                                     name="pholderName"
                                                     value="{!v.holderName}" required="true"/>

On save button click in lightning component the JS controller method is fired:

 var allValid = false;
    var allValid = component.find('fieldId').reduce(function (validSoFar, inputCmp) {
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && !inputCmp.get('v.validity').valueMissing;
    }, true);
 if(allValid{
       helper.save(component, event, helper); 
    }

The issue here is that, when I click on submit button on the Component, Policy Number shows up as mandatory but holder name does not. I have used the above code a lot of times for many different components. But is seems to be not working here.

Answer 1

As I can see you have given same aura:id (fieldId) to both fields and hence only one is shown.

Solution1 : give different aura:id to both fields.

Solution2: If you still insist on giving same aura:id to both field then iterate it and call showHelpMessageIfInvalid

let cmpList = component.find('fieldId');

cmpList.forEach(function(eachField) {
   console.log(eachField.get("v.validity").valueMissing); //Returns valid
    eachField.showHelpMessageIfInvalid();
});