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
    Commented Jan 26, 2019 at 10:35
  • Must be client-side validation. Validation rules are not enough. Commented Mar 9, 2019 at 4:00
  • @DanielHowell you got any solution or may be workaround? Commented Mar 11, 2019 at 7:22
  • No. No suggestions from anyone at the moment Commented 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
    Commented 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
  • There is no auraId on lightning:inputField developer.salesforce.com/docs/component-library/bundle/… Commented Mar 15, 2019 at 23:53
  • aura:id can be used on almost every component if not every, and it is not in the component specifications -> developer.salesforce.com/docs/atlas.en-us.218.0.lightning.meta/…
    – glls
    Commented Mar 16, 2019 at 0:34
  • I see that now. Commented Mar 16, 2019 at 0:38
  • When I Iuse event.preventDefault(); it does it job. Then I submit the form a second time and it passes the validation. But the form doesn't submit. If I reclick the button then it submits. So after adding a value it stops working for one click. Commented Mar 16, 2019 at 0:45
  • you will have to open a new post with the specifics =) comments are not for extended discussions
    – glls
    Commented Mar 16, 2019 at 0:46
8

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

1
  • That's a savior. :) Commented Sep 9, 2019 at 11:31
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
    Commented 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
    Commented Jun 5, 2019 at 13:59
  • Yeah that makes sense
    – dzh
    Commented 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 .