[SalesForce] Reset validity on input

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?

Best Answer

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
}

Related Solutions

[SalesForce] Lightning – Inputs Will only show you a required error if you enter and delete a value WHAT

My best guess based on research is that this should be fully functional whenever the element goes out of beta, most likely Summer '17, if the prerelease notes are any indication.

the Required highlights and message only appear IF you enter a value then remove the value (interact with the field)

This is how every UI element in Lightning prefers to operate. The idea is to keep as much red off the screen as possible. The Classic UI did this, too; there was only a red bar until you hit a button, then you'd have a red box and error message. Don't worry, your users will probably get used to it, unless... (spoilers ahead)

You can check for validity and it will return null if the user has not interacted with it

Validity in Spring '17 is guaranteed to be returned, according to the release notes. It's working in my Spring '17 sandbox.

I see no way to cause the message to be displayed from the component controller when checking validity

For now, it looks like the correct method is:

    var field1 = component.find("field1input");
    if(field1.get("v.validity").valid) {
        // continue processing
    } else {
        field1.showHelpMessageIfInvalid();
    }

Or, perhaps...

var field1 = component.get("field1");
var field2 = component.get("field2");
// ...
field1.showHelpMessageIfInvalid();
field2.showHelpMessageIfInvalid();
// ...
if(field1.get("v.validity").valid &&
   field2.get("v.validity").valid // && ...
) {
    // continue processing
}

However, it's not in the Release Notes (yet), so I might be jumping the gun. It does (currently) work in Spring '17, but might change before the final release.

If you really wanted to call out a field on init, showHelpMessageIfInvalid would do that, too, assuming we get access to it. Here's hoping.

[SalesForce] reset to call a controller

Personally, I'd set a handler on the search term itself:

<aura:attribute name="searchTerm" 
                type="String" />
<aura:handler name="change" 
              value="{!v.searchTerm}" 
              action="{!c.searchRecords}" />
<lightning:input value="{!v.searchTerm}" 
                 type="search"
                 label="{!v.fieldLabel}"
                 name="{!v.fieldLabel}" 
                 placeholder="{!v.placeholder}" />

Best Answer

Related Solutions

[SalesForce] Lightning – Inputs Will only show you a required error if you enter and delete a value WHAT

[SalesForce] reset to call a controller

Related Topic