I have a registration form with Lightning inputs and validations, ex.:

<lightning:input aura:id="email"
                 type="email"
                 label="Email"
                 name="email"
                 required="true"
                 messageWhenValueMissing="Please enter an email address."
                 value="{!v.email}" />

The form is displayed based on state. If the user cancels the registration, the form fields are hidden.

If validity has been triggered on any field and the user cancels the registration, if they start the registration again then validity is still showing on that field. I'd like to be able to remove validity from a field if the user cancels.

I tried something like this:

var email = component.find("email");
email.set("v.validity", false);

I'm not sure how to do this. Any thoughts?

  • Can you clarify a bit as what do you mean by clearing the validity when user cancels the form? Please note though, validity is a read-only attribute, so you cannot set any value on that attribute. – Jayant Das Dec 5 at 19:19
  • @JayantDas I added more to the question to explain what I'd like to do. – Matt Smith Dec 5 at 19:30

Because validity attribute is read-only, so you cannot set any values on that attribute. Excerpt from the documentation:

This validity attribute is a read-only object with the following boolean properties.


However, with a quick test, seems you can use an aura:if here by utilizing it as below.

<!-- declare an attribute with default as true, so that the input is rendered first time -->
<aura:attribute name="reRender" type="Boolean" default="true" />

<aura:if isTrue="{!v.reRender}">
    <lightning:input aura:id="email"
                     type="email"
                     label="Email"
                     name="email"
                     required="true"
                     messageWhenValueMissing="Please enter an email address."
                     value="{!v.email}" />
</aura:if>

<!-- as an example here for User Cancel, substitute with your logic -->
<lightning:button label="Cancel Registration" onclick="{!c.cancel}" />

And within the JS Controller:

cancel : function(component){
    // your all other logic
    // ...
    component.set("v.reRender", false); // first set false to hide the block
    component.set("v.reRender", true); // then set back to true to re-render the block
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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