Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Mayuri NehulMayuri Nehul 

how to add custom validation in LWC

Hi All,

I want to add custom validation on the date when From date is greater than to date then show an alert message before creating a record. I have tried the validation rule but it is not displaying any error.
Can anyone please help me with how to achieve it.

Thanks in advance
Surya GSurya G
Hi Mayuri, You can take leverage of onchange event in lightning date input and assign the date value to the variable. And you compare the from and to date in js and throw the error.
Suraj Tripathi 47Suraj Tripathi 47
Hi Mayuri,

You can add the Validation in your apex Class and set the Date as Params in your JavaScript. check the date in apex class if it is greater then add Error will use and don't insert the Record.
If you have used another logic please share your code, that We will help you
---------------
If you find your Solution then mark this as the best answer to close this question. 

Thank you!
Regards,
Suraj Tripathi
Mayuri NehulMayuri Nehul
Hi Surya & Suraj,
I am able to show as an alert message. Can any one of you help me how to show that error message on the particular field 
Attaching my code for your reference:

import { LightningElement,api,track,wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import Id from '@salesforce/user/Id';

export default class CreateRbtn extends NavigationMixin(LightningElement) 
{
    userId = Id;
    @track Leave_Request__c;
    @track cardTitle;
    Date1;
    Date2;
    rbValue = '';  //radio button value
    
    _wiredResult;
    handleSuccess(event) {
        console.log('onsuccess event recordEditForm',event.detail.id)
    }
    handleSubmit(event){
        var isVal = true;
        this.template.querySelectorAll('lightning-input-field').forEach(element => {
            isVal = isVal && element.reportValidity();
        });
        if (isVal) {
            this.template.querySelectorAll('lightning-record-edit-form').forEach(element => {element.submit();  });
            this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Leave record successfully created',
                variant: 'success',
                }),
            );
            // Navigate to the Leave request list view
    
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Leave_Request__c',
                actionName: 'list'
            },
            state: {
                
                filterName: 'Recent' 
            }
        });
        
    }
    
    
        
        else {
            this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error creating record',
                message: 'Please enter all the required fields',
                variant: 'error',
                }),
            );
        }
    }
    
    showRadioBtn = false;
    
    get options() {
        return [
            { label: 'Half day', value: '0.5' },
            { label: 'Full day', value: '1' },
        ];
    }
    
    handleChange(event){
        if(event.target.dataset.id === 'Date1'){
        this.Date1 = event.target.value;
        }else if(event.target.dataset.id === 'Date2'){
        this.Date2 = event.target.value;
        }
        
        if(this.Date1 == this.Date2){
            this.showRadioBtn = true;
          }else{
            this.showRadioBtn = false;
          }
      
          
       if(this.Date1>this.Date2)    
       {
           alert('To date should not be less than from date');
    }  
    
       if(this.Date1!=this.Date2&& this.rbValue=='Half day'){
           alert('For Half day leave,please select from date and to date same');
       }
        
    }

    handleRbtn(event){
        this.rbValue = event.target.value;
        // alert(this.rbValue);
        
    }

}

I am handling logic in Apex trigger. Let me know if you want me to share that one as well.

Thanks in advance
Mayuri