Custom Validation for LWC Record Form

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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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);
}
}
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); } }
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.