Custom Validation on LWC Record Form

Hello friends, today we’ll explore the process of implementing Custom Validation on LWC Record Form. This allows developers to enforce specific business rules, validate user inputs, and enhance the overall data quality within the Salesforce platform. Custom validation allows you to enforce business rules, check dependencies, or ensure data accuracy beyond the standard Salesforce checks.

Also, check this: Custom Submit button for LWC Record Form

Key Highlights :

1. Tailored Error Handling: Guide users with error messages specific to your business logic.
2. Enforce Business Rules: Ensure data integrity by adding validation that aligns with your organization’s unique processes.
3. Streamlined Workflows: Validate data conditions before submitting the form, preventing unnecessary errors.

Code :

customValidationRecordForm.HTML:

<template>
	<lightning-card variant="Narrow" title="Custom Submit button for LWC Record Form" icon-name="standard:contact">
		<div class="slds-p-horizontal_small">
			<lightning-record-edit-form object-api-name="Contact" onsuccess={handleSuccess}>
				<lightning-input-field field-name="FirstName" required></lightning-input-field>
				<lightning-input-field field-name="LastName" required></lightning-input-field>
				<lightning-input-field field-name="Email" required></lightning-input-field>
			</lightning-record-edit-form>
			<!-- Custom Submit Button -->
			<lightning-button label="Custom Submit Button" onclick={handleSubmit} variant="brand"></lightning-button>
		</div>
	</lightning-card>
</template>

customValidationRecordForm.JS:

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class CustomValidationRecordForm extends LightningElement {

    isInputValid() {
        let isValid = true;
        let inputFields = this.template.querySelectorAll('lightning-input-field');
        inputFields.forEach(inputField => {
            if (!inputField.reportValidity()) {
                isValid = false;
            }
        });
        return isValid;
    }

    handleSubmit() {
        // Custom logic before submission
        let isValid = this.isInputValid();

        if (isValid) {
            // Submit the form
            this.template.querySelector('lightning-record-edit-form').submit();
        }
    }

    handleSuccess() {
        const toastEvent = new ShowToastEvent({
            title: 'Success',
            message: 'Contact created successfully.',
            variant: 'success',
            mode: 'dismissable'
        });
        this.dispatchEvent(toastEvent);
    }
}

Output :

Conclusion:

Custom validation on LWC Record Forms empowers developers to enforce specific business rules, ensuring data integrity and enhancing the user experience. By implementing tailored validation logic, you can guide users in providing accurate data, reduce errors, and maintain a high standard of data quality within your Salesforce environment. Embrace the flexibility of Lightning Web Components to customize validation and create a seamless data entry process for your users.

Reference :

1. Custom validation in Lightning Web Component
2. record edit form