I have issue with the lightning:input size. The maxlength is 5 and everything looks good. But when I set the custom validation error in my JS with the error message "CVV2 attempt failed. Please try again or select another token", The size of the input text box is expanding to the lenght of error message.

<lightning:layoutItem size="" padding="horizontal-small">
    <lightning:input type="text" label="CVV2" maxlength="5" id="cvv2Id".../>

<lightning:layoutItem size="" padding="horizontal-small" >
    <lightning:input type="text" label="Exp. Date" maxlength="5".../>

  showInvalidCVVMessage: function(component, event,helper){
     var v = component.find("cvv2Id");
     v.setCustomValidity("CVV2 attempt failed. Please try again or select another token");

1 Answer 1


You need to specify aura:id and not just id.

In lightning (aura/lwc), the ids are modified at runtime. In aura, you need aura:id to identify using component.find

<lightning:input type="text" label="CVV2" maxlength="5" aura:id="cvv2Id" />
  • It is aura:id only. I mentioned as id initially. May 18, 2020 at 3:29

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.