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

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

 <lightning:input aura:id="fieldId" label="Policy Number"
                                                     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) {
        return validSoFar && !inputCmp.get('v.validity').valueMissing;
    }, true);
       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.


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.