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

share|improve this question
    
By "checking validity", do you mean "isValid", or something else? I'm just checking to make sure I haven't missed anything. – sfdcfox 9 hours ago
    
@sfdcfox - See updated question. – Eric 9 hours ago
    
Thanks. Give me a sec. Writing code now... – sfdcfox 9 hours ago

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.

share|improve this answer
    
I just said screw it. I disabled the button to save the record and added an on change handler to check each and every field for null validity or valueMissing = true. If all are OK then enable the button, otherwise leave it disabled. I am not on Spring 17 and showHelpMessageIfInvalid() is not a valid function for me :( – Eric 7 hours ago
1  
@Eric Yeah, here's hoping it'll be fixed in the next six months... – sfdcfox 7 hours ago

This is supposedly getting fixed in Spring '17. I can't deep link in the PDF but check page 388 for details on the change. I have not checked this out in a pre-release org yet.

https://resources.docs.salesforce.com/206/latest/en-us/sfdc/pdf/salesforce_spring17_release_notes.pdf

share|improve this answer
    
Thanks for that.....If it was not enough, it seems there is no way to easily show a message only on error either....I am about ready to just go back to VF with SLDS styling and forgetting about it for another year. – Eric 8 hours ago
    
Even if they fix the validity it still does not resolve the problem with the field not showing as error if no value entered. There is no way to set it or make it display. The only option is a handler on EVERY component that throws an error and dynamically create a ui:message component. Unless I am missing something. I mean this is basic stuff..... – Eric 8 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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