I need to show a toast with an error message on a LWC form if one of the fields has an invalid value. the validations are done and the toast appears when it's supposed to, but the message itself only appears if I click on the "submit" button a second time, never on the first. how can I correct this?


<template if:true={showErrorMessage}>
   <div class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
       <!--error graphic-->
       <span class="slds-icon_container slds-icon-utility-error slds-m-right_x-small" title="Description of icon when needed">
           <lightning-icon icon-name="utility:error" alternative-text="Error" title="Error" variant="inverse"></lightning-icon>
       <!--error message-->
       <h2 class="alrmmsg"></h2>

js (not shown here but I initialize a prop called showErrorMessage as false and this code basically just puts it to true if there's an error - and also this .catch() comes from a handleClick() function for the button you see on the screeshot)

.catch(error =>{
     this.showErrorMessage = true;
     if (error.body.pageErrors[0].statusCode == "FIELD_CUSTOM_VALIDATION_EXCEPTION") {
           this.template.querySelectorAll('.alrmmsg')[0].innerHTML = error.body.pageErrors[0].message;
     } else {
            this.template.querySelectorAll('.alrmmsg')[0].innerHTML = B2B_ErrorServer;

error toast but no message

1 Answer 1


Can you please show you js code? Have you tried adding an onclick to the div and usingd something similar to this:

const evt = new ShowToastEvent({
        title: this._title,
        message: this.message,
        variant: this.variant,

You can check salesforce full example here: Display Toast Notifications

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .