function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
VICKY_SFDCVICKY_SFDC 

ADD Custom VALIDATION IN LWC FORM

Hi,
My below LWCCODE IS WORKING FINE,,,I JUST WANT SOME SMALL MODIFICATIONs,,,AND ADD SOME VALIDATIONS

Like in Name if i will give ivalid input it will throw the error “INVALID NAME” something like that

And additionally i  want a checkbox field as well which will be add checkbox checked if in form checkbox is selected

A)dEFTECH.html:

<template>
<lightning-card title={cardTitle} icon-name="custom:custom85">
    <div class="slds-m-around_medium">
        <lightning-record-edit-form object-api-name="Opportunity" onsuccess={handleSuccess}>
            
            <lightning-messages>
            </lightning-messages>
            
            <lightning-input-field field-name="Name" pattern={name_validation}>
            </lightning-input-field>

<lightning-input-field field-name="Subject">
            </lightning-input-field>

            <lightning-input-field field-name="StageName">
            </lightning-input-field>

            <lightning-input-field field-name="CloseDate">
            </lightning-input-field>

            <lightning-input-field field-name="Type">
            </lightning-input-field>

           
 <!--Parent account for opportunity-->
            <lightning-input-field field-name="AccountId" value={recordId}>
            </lightning-input-field>
            <lightning-button
            class="slds-m-top_small"
            type="submit"
            label="Create new">
        </lightning-button>
         </lightning-record-edit-form>
    </div>   
</lightning-card>   
</template>


B) dEFTECH.js

import { LightningElement ,track,api} from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';//DISPLAY TOAST MESSAGE
export default class DEFTECH extends LightningElement {
    @api recordId;
    @track cardTitle='New Opportunity';
       
    handleSuccess (){//===>JUST COPY AND PASTE AS IT IS
        const evt = new ShowToastEvent({
            title: "Success!",
            message: "Congrats, Opportunity record has been successfully",
            variant: "success",
        });
        this.dispatchEvent(evt);
    }

}
 
ANUTEJANUTEJ (Salesforce Developers) 
Hi Vikas,

>> https://www.salesforcepoint.com/2020/09/validate-lwc-input-data-how-to-add.html

>> https://salesforcediaries.com/2020/04/30/validate-lightning-input-field-on-button-click-in-lightning-record-edit-form/

The above two examples show implementations where the fields are validated using checkValidity() you can use a similar implementation for validating fields in your component.

Let me know if it helps you and close your query by marking it as the best answer so that it can help others in the future.  

Thanks.
Suraj Tripathi 47Suraj Tripathi 47
Hi VikasKumar_sfdc

Greeting!


When you say you want to throw error on invalid name what do you mean by invalid name.
If you mean to say you don't want that field blank in that case you can use 
this in your JavaScript: 
const allValid = [...this.template.querySelectorAll('lightning-input')]
            .reduce((validSoFar, inputCmp) => {
                        inputCmp.reportValidity();
                        return validSoFar && inputCmp.checkValidity();
            }, true);
        if (allValid) {
            //whatever you want to do whenever your field is valid.
        } else {
            alert('Invalid Name');
        }
and about your second part, you can make the checkbox checked by simply passing the value of the checkbox in your apex "True", Whenever your checkbox is checked in form.


If you find your Solution then mark this as the best answer. 

Thank you!
Regards,
Suraj Tripathi
VICKY_SFDCVICKY_SFDC
Hi Suraj, thanks for you reply.

For me invalid name like is some one give any special chracter for name then it will throw an error like"YOU ENTERED AN INVALID NAME" something like this.

And for second part can't we use the checkbox without apex ????

In case No. Can you can you help me with some updated code if possible??
It will be really helpful for me if you help me out with complete updated code,

I am new in LWC.
VICKY_SFDCVICKY_SFDC
Hi ANUTEJ,

I already gone through above  links yesterday bt didn't understood much