6

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?

  • 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 at 10:35
  • Must be client-side validation. Validation rules are not enough. – Daniel Howell Mar 9 at 4:00
  • @DanielHowell you got any solution or may be workaround? – Aditya Vijay Mar 11 at 7:22
  • No. No suggestions from anyone at the moment – Daniel Howell Mar 12 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 at 10:55
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

2

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

0

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"/>
  • Note: might need to tweak it if only one required field is on screen. – dzh Apr 17 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 at 13:59
  • Yeah that makes sense – dzh Jun 7 at 16:00

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.