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

Ok, another basic question that I though would work but alas…..

Using <lightning:input required="true">

  1. the Required highlights and message only appear IF you enter a value then remove the value (interact with the field)
  2. You can check for validity and it will return null if the user has not interacted with it
  3. I see no way to cause the message to be displayed from the component controller when checking validity

The Problem: – If the field is required AND the user has not entered a value (a pretty common use case I would think) How do you make the field display the validation error like this

enter image description here

If the user does not interact with the field it seems there is no way to call it out?? Am I missing something.

The only way the field looks like above is if the user has entered and removed a value or if they removed the preexisting value….

Validity

https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_input.htm

in Component controller:

    var e = component.find('bAddress');
    console.log(e.get('v.validity'));

outputs

enter image description here

If the user has not interacted with the element then the value of validity will be null.

Also, isValid() always seems to equals to true regardless of if it is null or not

Best Answer

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.

Related Topic