How to do field validation on lightning:recordEditForm with lightning:inputField

Question

Background

I have a lightning component with a lightning:recordEditForm for creating new Opportunity records.

The lightning:recordEditForm contains many lightning:inputField 's

I would like to perform basic required field validation on the form, using code like this:

     let isValid = true;
     let fields = cmp.find("requiredField"); // gets all required fields

     for (var i = 0; i < fields.length; i++) {
         if (fields[i] != null) {
             if (fields[i].get('v.validity').valid == false) {
                 fields[i].showHelpMessageIfInvalid();
                 isValid = false;
             }
         }
     }

But I am unable to access property validity / valid on the lightning:inputField

And I am unable to call the showHelpMessageIfInvalid() method on the lightning:inputField

Questions

1. How should I approach form validation using lightning:recordEditForm
2. How can I get each field to display the red border if the field is not valid?

Answer 1

You are not able to use validity on lightning:inputField because the attribute is not supported on this component, instead its an attribute for lighting:input.

For validating lightning:inputField with lightning:recordEditForm, you can refer to this answer which provides a perspective as how you can validate values entered on the component.

For the error scenarios, you can utilize the CSS that's available for the purpose. You can refer to more on this on SLDS documentation for the component from where it inherits the styling.

Answer 2

One way to catch and throw error messages without having to write any custom code is to include <lightning:messages/> in the component and set the fields to required at the object level. Heres an example of that

If you are unable to do that for your org my advice would be to switch to lightning:input as it is one of the few tags that currently supports custom client side validation