7

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

  • By "checking validity", do you mean "isValid", or something else? I'm just checking to make sure I haven't missed anything. – sfdcfox Jan 10 '17 at 3:27
  • @sfdcfox - See updated question. – Eric Jan 10 '17 at 3:31
8

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.

| 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 Jan 10 '17 at 5:19
  • 1
    @Eric Yeah, here's hoping it'll be fixed in the next six months... – sfdcfox Jan 10 '17 at 5:22
  • @sfdcfox This does not work for me as well as .isValid(): it is always true and the get('v.validity').valid too. – Simon Placentino Jan 10 '17 at 13:31
  • @SimonPlacentino It only works in a Spring 17 org as I described. I have working code in a sandbox if you'd like me to add it. – sfdcfox Jan 10 '17 at 16:39
  • 3
    @sfdcfox is correct, these issues have been fixed in Spring '17. The validity attribute will be properly initialized with a reference to the actual validity and will never be null. You will also be able to programmatically render the help message if the form control is invalid using showHelpMessageIfInvalid(). – Eugene Kashida Jan 10 '17 at 19:44
2

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

| 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 Jan 10 '17 at 4:14
  • 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 Jan 10 '17 at 4:16
  • Lol, this issue is not yet fixed. I just came across the same scenario(Eric's concern, only interaction makes it trigger the validation). sfdcfox's solution worked for me(in Spring'18 release). – Arnold Jr. Jan 31 '18 at 1:21
1

I found the easiest solution from Salesforce documentation itself. Add the following method in your helper class(make sure the id's match) and it will take care of the error handling.

    ({
    validateContactForm: function(component) {
        var validContact = true;
         // Show error messages if required fields are blank
        var allValid = component.find('contactField').reduce(function (validFields, inputCmp) {
            inputCmp.showHelpMessageIfInvalid();
            return validFields && inputCmp.get('v.validity').valid;
        }, true);
        if (allValid) {
            // Verify we have an account to attach it to
            var account = component.get("v.newContact");
            if($A.util.isEmpty(account)) {
                validContact = false;
                console.log("Quick action context doesn't have a valid account.");
            }
            return(validContact);

        }  
    }

})

Here is the link to the article. https://trailhead.salesforce.com/en/modules/lightning_data_service/units/lightning_data_service_manipulate_records

Thanks, Narsimha Rao

| improve this answer | |
0

I found a solution to this problem, and wanted to share hours for others who are struggling with this problem.

If you want to validate all your required inputs upon click of a button, then have following code in your controller/helper. This code should be part of the function that executes when button is clicked:

var inputCmp1 = component.find("inputCmp");
for(var i=0; i < inputCmp1.length; i++) {
    //This condition is helpful in case some of the input components are not rendered. I wasted almost 2 hours to figure out that non-rendered components giving an error.
    if(inputCmp1[i].isRendered()) {
        inputCmp1[i].showHelpMessageIfInvalid();
    }
}
| improve this answer | |

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.