7

There is no setting for the lightning:inputField to make it required.

idea: https://success.salesforce.com/ideaView?id=0873A000000lKNbQAM docs: https://developer.salesforce.com/docs/component-library/bundle/lightning:inputField/specification

My lightning component is dynamic with all of the fields being passed through. I cannot find a way to make required fields required.

<lightning:recordEditForm objectApiName="{! v.sObjectName }"
                          recordId="{! v.recordId }"
                          recordTypeId="{! v.recordTypeId }"
                          class="slds-card slds-p-around_medium"
                          onsuccess="{! c.onsuccess }"
                          onsubmit="{!c.handleSubmit}"
                          >
 <aura:iteration items="{! column.Fields }" var="field">
 <lightning:inputField  fieldName="{! field.APIName }"  class="{!'slds-p-top_small slds-m-top_medium '+field.Behaviour}" disabled="{! field.Behaviour=='Readonly'}" />
</aura:iteration>
</lightning:recordEditForm> 

Any ideas on how to make an onsubmit function that can loop through N number of input fields and make them required?

5
  • I think this will help you. visit this link and let me know whether you are able to fix . salesforce.stackexchange.com/questions/207336/…
    – keepler
    Jan 26, 2019 at 10:35
  • Must be client-side validation. Validation rules are not enough. Mar 9, 2019 at 4:00
  • @DanielHowell you got any solution or may be workaround? Mar 11, 2019 at 7:22
  • No. No suggestions from anyone at the moment Mar 12, 2019 at 8:02
  • @DanielHowell why can't you check if this field exists on the form and if so, is it filled? In my opinion you can do it using JS.
    – Adamo
    Mar 12, 2019 at 10:55

3 Answers 3

9
+50

OOTB, lightning:inputfield handles field validations that are configured through your object's field settings, so that would be the first place you want to check in order to make your fields "required".

If for whatever reason, the above is not an option (eventhough it should be), then adding an aura:id that identifies all your lighting:inputfield fields will enable you to simply 'fetch' all of them with component.find('yourAuraId') which returns an array you can iterate over to perform your field validations.

You can then bind your validation method to the onsubmit event and do a simple check for blank fields:

isFormValid: function (cmp, evt, helper) {
    const requiredFields = cmp.find('yourAuraId') || [];
    var isValid = true;
    requiredFields.forEach(e => {
        if (e.get('v.value')=='' || e.get('v.value').trim().length==0 ) {
            isValid = false;
        }
    });

    return isValid;
},

based on the what is returned by the validation method, you can proceed with submitting the form or not with event.preventDefault(); // stop the form from submitting

8
8

Winter20 , required attribute available for lightning:inputField from winter 20

1
1

Slightly modified version of @glls answer:

isFormValid: function (component) {
    return (component.find('requiredField') || [])
        .filter(function (i) {
            var value = i.get('v.value');
            return !value || value == '' || value.trim().length === 0;
        })
        .map(function (i) {
            return i.get('v.fieldName');
        });
}

Then use as:

    var invalidFields = helper.isFormValid(component);
    if(invalidFields && invalidFields.length > 0){
        helper.reportUserError(
            'Please complete all required fields',
            'Incomplete: '+ invalidFields.join(', ')
        );
        event.preventDefault();
        return;
    }

Where reportUserError is just a wrapper for error toast (or whatever logic you wanna do).

Unfortunate thing is it returns list of field API names - not sure is possible to get label.

What you'll also find probably useful is how to add a typical "required" asterisk to you component - here.

In the end your markup will be like this:

<lightning:inputField
                                class="customRequired"
                                aura:id="requiredField"
                                fieldName="Foo__c"/>
3
  • Note: might need to tweak it if only one required field is on screen.
    – dzh
    Apr 17, 2019 at 1:27
  • Do you really need that check for value == ''? !value should be enough to verify if the string is empty.
    – Eduard
    Jun 5, 2019 at 13:59
  • Yeah that makes sense
    – dzh
    Jun 7, 2019 at 16:00

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .