How can one validate 'recordEditForm' fields before submitting them to the platform?

Question

In a custom lightning component where one is using the recordEditForm tag, how can one validate fields that are filled by the user?

For example, in a quick action to create a Case record, we can have the following line inside the recordEditForm:

<lightning:inputField aura:id="caseAccount" fieldName="AccountId"/>

How can one enable or disable a button if certain fields are assigned by the user? Like if the account is specified, then a button on the component is enabled for the user.

Making the field required is not an option.

Answer 1

Here's a way that you can achieve this. Let's say I have the component as below. There's a field for Title, which is hidden when the component is rendered (and your use case is to enable that). This approach also makes sure that all your standard validations are taken care of, viz., required fields, email formatting (in the example below).

Component:

<lightning:recordEditForm aura:id="editForm" recordId="xxxx" objectApiName="Contact" >
    <lightning:inputField aura:id="firstNameField" fieldName="FirstName" />
    <lightning:inputField fieldName="LastName" />
    <lightning:inputField fieldName="Email" />
    <lightning:inputField aura:id="titleField" fieldName="Title" class="slds-hidden" />
    <lightning:button class="slds-m-top_small" variant="brand" name="update" label="Update" onclick="{!c.onSubmit}"/>
</lightning:recordEditForm>

Controller JS:

onSubmit : function(component, event, helper) {
    var firstName = component.find("firstNameField").get("v.value");


    // perform validations as required based on the value retrieved
    if(firstName === "xyz") {....}
    var titleField = component.find("titleField");
    $A.util.addClass(titleField, 'slds-visible');
    // based on the validations, invoke the below to submit the form
    //component.find("editForm").submit();
},

Few things to take care of on the component/JS are as below:

1. Assign an id to the lightning:recordEditForm
2. Associate a onclick event and function to the button used to save the form (if you are using a lighting:button as with type="submit" to submit the form, you may like to remove that)
3. Perform any validations that you need in the controller function associated to the button viz., showing/hiding the element and submitting the form by getting the aura:id associated to recordEditForm and invoking a submit() (you can use submit() call if in edit mode) or call an apex aura method for any additional server side handling
4. If the form is utilized for "edit" operations, provide a recordId to associate a record in lightning:recordEditForm. If the form is utilized for "create" operations, do not provide any recordId attribute, and you will get a new form to submit the input.
5. To retrieve value entered on any input field, associate an aura:id and retrieve it's value in the JS as in the example

Answer 2

A simple approach to validate field validity on lightning:inputField elements is by using built-in Lightning Component methods (outlined below). If you need certain behaviors based on specific inputs, the answers above do a good job of going through that.

Component:

<lightning:recordEditForm
                          aura:id="form"
                          objectApiName="Account">
    <lightning:inputField
                          aura:id="field"
                          required="true"
                          fieldName="Name"/>
</lightning:recordEditForm>
<lightning:button label="Save" onclick="{!c.handleSave}"/>

Controller:

handleSave : function(component, event, helper) {
    // Make sure fields are in an iterable object by casting to array if not already
    let fields = component.find("field");
    if (fields) {
        fields = Array.isArray(fields) ? fields : [fields];
    }
    else {
        fields = [];
    }
    const valid = fields.reduce((validSoFar, field) => {
        // Return whether all fields up to this point are valid and whether current field is valid
        // reportValidity returns validity and also displays/clear message on element based on validity
        return (validSoFar && field.reportValidity());
    }, true);
    // If all fields aren't validated, throw error message
    if (!valid) {
        const toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "message": "Review all error messages below to correct your data.",
            "type": "error"
        });
        toastEvent.fire();
    }
    // Otherwise submit save
    else {
        component.find("form").submit();
    }
}

Answer 3

Here's an approach I've devised a while ago:

 <aura:attribute name="recordUiCache" type="Object" access="private" />
 <lightning:recordEditForm
        density="comfy"
        onsuccess="{!c.redirect}"
        onsubmit="{!c.showSpinner}"
        onload="{!c.hideSpinner}"
        onerror="{!c.hideSpinner}"
        recordId="{!v.record.Id}"
        recordTypeId="{!v.record.RecordTypeId}"
        objectApiName="_Info__c">
    <lightning:card title="Some Details">
        <aura:if isTrue="{!v.showSpinner}">
            <lightning:spinner/>
        </aura:if>
        <aura:set attribute="actions">
            <lightning:button
                    variant="brand"
                    type="submit"
                    name="save"
                    label="Save"/>
        </aura:set>
        <lightning:messages/>
        <lightning:layout>
            <lightning:layoutItem padding="around-small">
                <lightning:inputField
                        class="customRequired"
                        aura:id="requiredField"
                        fieldName="SomeQuestion1__c"/>
                <lightning:inputField
                        fieldName="SomeOtherQuestion__c"/>
            </lightning:layoutItem>
        </lightning:layout>
    </lightning:card>
</lightning:recordEditForm>

CSS:

.THIS .customRequired {
    font-weight: 400;
}

.THIS .customRequired:before {
    content: "*";
    color: rgb(194, 57, 52);
    left: -0.5rem;
    position: absolute;
    top: 3px;
}

Controller:

hideSpinner: function (component, event, helper) {
    component.set('v.recordUiCache', event.getParam('recordUi'));
    component.set("v.showSpinner", false);
},
showSpinner: function (component, event, helper) {
    var invalidFields = helper.getFieldLabelsByApiName(
        component.get('v.recordUiCache'),
        helper.getBlankFields(component.find('requiredField')));
    if (invalidFields && invalidFields.length > 0) {
        helper.reportUserError(
            'Please complete all required fields:',
            invalidFields.join(', ')
        );
        event.preventDefault();
        return;
    }
    component.set("v.showSpinner", true);
}

Helper:

getFieldLabelsByApiName: function (recordUi, invalidFields) {
    if (recordUi && recordUi.objectInfo && recordUi.objectInfo.fields) {
        invalidFields = invalidFields.map(function (value) {
            var f = recordUi.objectInfo.fields[value];
            if (f) {
                return f.label;
            } else {
                return value;
            }
        })
    }
    return invalidFields;
},
getBlankFields: function (fields) {
    if(!fields) {
        return [];
    } else {
        if(!$A.util.isArray(fields)){
            fields = [fields];
        }
    }
    return fields
        .filter(function (i) {
            var value = i.get('v.value');
            return !value || value == '' || value.trim().length === 0;
        })
        .map(function (i) {
            return i.get('v.fieldName');
        });
},

How this works:

1. When recordEditForm callback loads, there's a param recordUI which holds some metadata info about the form. Store that on component.
2. Mark one or more lightning:inputField with aura:id="requiredField" and class="customRequired".
3. On submit it will look for all required fields, will return blank ones API name's and then will check recordUiCache for their corresponding labels which will be shown as a toast (via helper.reportUserError not implemented here).

Answer 4

If you wanna validate on change, you'd go:

    <lightning:inputField
        fieldName="Listing_Type__c"
        onchange="{!c.listingChange}"/>

Controller:

    listingChange: function (component, event, helper) {
        var value = event.getParam('value');
        var isUnListed = value === 'Unlisted' || !value;
        component.set('v.isListed', !isUnListed);
    },

Can't remember if you can get field API name from the event here. Looking at my old code - I guess no. But if you could then you could just write one generic onchange handler rather one for each field.