<form class="needs-validation" novalidate>

  <select id="select-with-validation" class="is-invalid">

    <option value=""></option>

    <option value="1">One</option>

    <option value="2">Two</option>

    <option value="3">Three</option>

    <option value="4">Four</option>

    <option value="5">Five</option>

    <option value="6">Six</option>

    <option value="7">Seven</option>

    <option value="8">Eight</option>

  </select>

  <button type="submit" id="submit" class="btn btn-primary btn-sm mt-3" data-mdb-ripple-init>

    Submit

  </button>

</form>

​

  const selectEl = document.getElementById('select-with-validation');

  const instance = new mdb.Select(selectEl, {

    validation: true,

    validFeedback: "This value is valid",

    invalidFeedback: "This value is invalid",

    clearButton: true

  })

​

  document.querySelectorAll("div.select-wrapper").forEach((wrapper) => {

    const originalSelect = wrapper.querySelector("select.select-initialized");

    const newSelect = wrapper.querySelector("input.select-input");

    console.log(originalSelect, newSelect)

    if(originalSelect && newSelect && originalSelect.classList.contains("is-invalid")){

      newSelect.classList.add("is-invalid");

    }

  });

​