Topic: Validation on mdbselect

sandor farkas priority asked 2 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/


sandor farkas priority answered 2 years ago


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


Michał Duszak staff answered 2 years ago


sandor farkas priority answered 2 years ago


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


Michał Duszak staff answered 2 years ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.1
  • Device: web
  • Browser: chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: Yes