Custom Validation for LWC Record Form

/ apex, Salesforce / By

Hey there, today we’ll dive into implementing Custom Validation on LWC Record Form. This empowers developers to enforce unique business rules, validate user inputs, and elevate data quality on the Salesforce platform. Custom validation enables the enforcement of business rules, verification of dependencies, and ensures data accuracy beyond the typical Salesforce checks.

Main Points:

  • Customized Error Management: Direct users with error messages tailored to your business logic.
  • Implementing Business Regulations: Uphold data integrity by integrating validations that match your organization’s distinct workflows.
  • Efficient Workflows: Validate data conditions prior to form submission, averting unnecessary errors.

Code :

recordFormCustomValidation.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>

recordFormCustomValidation.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);
    }
}

Closing Thoughts:

Implementing custom validation on LWC Record Forms enables developers to enforce unique business rules, ensuring data integrity and improving user experiences. By incorporating specialized validation logic, you can assist users in providing accurate data, minimize errors, and uphold a superior level of data quality in your Salesforce setup. Utilize the adaptability of Lightning Web Components to personalize validation, fostering a smooth data entry experience for your users.

Related Posts