MDB Toast vs Bootstrap Toast

This is your Toast HTML:

<div
  class="toast fade mx-auto"
  id="basic-error"
  role="alert"
  aria-live="assertive"
  aria-atomic="true"
  data-mdb-autohide="true"
  data-mdb-delay="2000"
  data-mdb-position="top-right"
  data-mdb-append-to-body="true"
  data-mdb-stacking="true"
  data-mdb-width="350px"
  data-mdb-color="danger"
>
  <div class="toast-header text-white">
    <strong class="me-auto">MDBootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body text-white">Error message</div>
</div>

This is how you reference it in JS:

let errorInstance = mdb.Toast.getInstance(document.getElementById('basic-error'));

Then in your custom validation, you have to use show() method just right where you want to show the toast:

errorInstance.show();

Here's documentation for MDB Toast. https://mdbootstrap.com/docs/standard/components/toasts/

You have to replace old BS Toasts with MDB Ones. You also have to delete loading of bootstrap css and js files. Use mdb files instead of bootstrap files, so you won't get into trouble.

Here I have added buttons which trigger certain toasts, so you can see how it's done. I also had to delete BS files - they were overwriting styles and scripts. https://mdbootstrap.com/snippets/standard/m-duszak/3307377#js-tab-view