How to Loop Fields in Multiple LWC Record Edit Forms?

How to Loop Fields in Multiple LWC Record Edit Forms?

On November 30, 2025, Posted by , In LWC Essentials, With Comments Off on How to Loop Fields in Multiple LWC Record Edit Forms?
How to Loop Fields in Multiple LWC Record Edit Forms

Question

I have created four lightning-record-edit-form components on a custom object in my LWC. On the click of a button, I want to validate the fields inside each form. Specifically, I need to check if field A is populated, then either field B or C must also be populated. In addition, there is a percentage field inside each form, and I want to ensure that the total percentage across all four records does not exceed 100%.

Here is an example of one of the four record edit forms (they all have the same structure, but I only added onsubmit to the first one):

<!-- Incented Employee #1 Primary -->
<lightning-layout-item padding="around-small">
    <lightning-record-edit-form object-api-name="Incented_Employees__c" data-id="IeForm" onsubmit={handleSubmit} onsuccess={handleIeSuccess}>
        <div class="slds-grid slds-gutters">
            <div class="slds-size_6-of-12">
                <lightning-input-field lwc:ref="employee1" field-name="Employee__c" required={ie1IsAccountManager}></lightning-input-field>
            </div>
            <div class="slds-size_3-of-12">
                <lightning-input-field lwc:ref="type1" field-name="Type__c"></lightning-input-field>
            </div>
            <div class="slds-size_3-of-12">
                <lightning-input-field field-name="Member_Lock_In__c"></lightning-input-field>
            </div>
            <div class="slds-size_4-of-12">
                <lightning-input-field lwc:ref="percentage1" field-name="Member_Credit_Percentage__c"></lightning-input-field>
            </div>
        </div>               
    </lightning-record-edit-form>
</lightning-layout-item>

I can query all record edit forms like this, but I am struggling with how to loop through each field inside the form and run my validations:

this.template.querySelectorAll('lightning-record-edit-form[data-id="IeForm"]')
  .forEach((form) => {
    console.log('here is the form ' + form);
  });

How can I validate fields across multiple record edit forms and ensure that the total percentage is not more than 100%?

Answer

The cleanest approach is to use lwc:ref, which allows you to directly access field values without needing complex DOM queries. Since you already started using lwc:ref, you can extend this pattern. Assign distinct references for each form and field, such as employee1, employee2, type1, type2, percentage1, percentage2, and so on.

Boost your Salesforce career with CRS Info Solutions expert-led Salesforce online training, hands-on projects, and free demo sessions for beginners and professionals!!!

You can then loop over the refs in your JavaScript. For example, to check that if field A (Employee) is filled, then either field B (Type) or C (Member) must also be filled, you could write:

// check function for one form
const check = (i) => (
    !this.refs['employee' + i].value 
    || this.refs['type' + i].value 
    || this.refs['member' + i].value
);

// validate all four forms
const checkAll = check(1) && check(2) && check(3) && check(4);

To calculate and validate the percentage total across all forms:

const sum = Object.keys(this.refs)
    .filter(e => e.startsWith('percentage')) // only percentage fields
    .filter(e => this.refs[e].value) // skip empty values
    .reduce((prev, cur) => prev + parseFloat(this.refs[cur].value), 0);

if (sum > 100) {
    console.error('Total percentage exceeds 100%');
}

As for your follow-up about adding lwc:ref to the lightning-record-edit-form itself: yes, it is possible, but the object you get back is a regular HTMLElement. Inside the form, you would need to access fields using standard DOM APIs like querySelectorAll, for example:

this.refs.form2.querySelectorAll('lightning-input-field')[3].value;

Summing Up

In LWC, you can efficiently validate fields across multiple lightning-record-edit-form components by using lwc:ref to directly access individual field values. This allows you to enforce conditional rules, such as requiring certain fields when another is populated, and to calculate totals like percentages across all forms. By combining these checks, you ensure clean, reliable data entry while keeping the code readable and maintainable.

Launch Your Salesforce Career with Expert Training in Australia

Take your career to new heights with professional Salesforce training in Australia from CRS Info Solutions. Designed to equip you with the skills needed to thrive in the fast-growing Salesforce ecosystem, our courses focus on practical learning with real-time project experience. From Salesforce Admin and Developer to cutting-edge AI modules, we cover it all with hands-on training led by industry experts.

Whether you’re a beginner exploring the Salesforce training in Australia or an experienced professional looking to upgrade your skills, our training is tailored to meet your career goals. With personalized support, in-depth course materials, and expert guidance for certification and interview preparation, you’ll be fully prepared to excel in the industry.

Join us today for a free demo session and take the first step towards a rewarding Salesforce career!!!

←
Comments are closed.