Validation on mdbselect

Topic: Validation on mdbselect

sandor farkas pro premium priority asked 3 years ago

Expected behavior I want to validate mdbselect with html5 validation. What would be the right way to validate a mdbselect field? In my case I want to have a required select field.

Actual behavior Since mdbselect is no default input element I suppose validation is not supported.

Resources (screenshots, code snippets etc.) https://mdbootstrap.com/docs/b5/react/forms/select/ https://mdbootstrap.com/docs/standard/forms/validation/

Add comment

Michał Duszak staff answered 3 years ago

0 0 Best answer

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.

Add comment

sandor farkas pro premium priority answered 3 years ago