thank you @Michał Duszak This helped me. Thank you

Here's updated snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3052098#js-tab-view

Hey thank you for your reply. The snippet does not seem to be related to my problem as far as I can see it.

It's possible to create custom validation functions, for example: https://mdbootstrap.com/snippets/standard/m-duszak/3052098#js-tab-view

I created a custom function to check if the select element's value is 'One' , and created custom classes to append custom valid/invalid notches.

function checkSelectValidation(event) {
      if (select.value == 'One') {
        const selectWrapper = document.querySelector('.validate-select');
        selectWrapper.classList.remove('invalid');
        selectWrapper.classList.add('valid');

      }
      if(select.value !== 'One') {
        const selectWrapper = document.querySelector('.validate-select');
        selectWrapper.classList.add('invalid');
        selectWrapper.classList.remove('valid');
        event.preventDefault();
        event.stopPropagation();
          }
};

It's also important that you wrap your select in a div, so that you can refer to it all the time it's in the DOM.