mdb-select validation not show invalid-feedback message


Topic: mdb-select validation not show invalid-feedback message

webdesigna asked 3 years ago

Expected behavior Hi

mdb-select validation not show invalid-feedback message on click sumbit. Other select validate ok.

For example: https://mdbootstrap.com/snippets/jquery/mandra/397124

Please help! I need solve this issue.

Actual behavior

Resources (screenshots, code snippets etc.)


MDBootstrap staff pro premium answered 3 years ago

Hi webdesigna,

I created snipped with an example of a possible solution for your development. I am aware our material select has some problems, but we will fix its behaviour in the future. Right now try my solution:

https://mdbootstrap.com/snippets/jquery/pjoter-2-0/848712

If you need additional help, I am here for you.

Best Regards, Piotr


vilage answered 2 years ago

Hi,

we also have problem with select validation, and I trie you code snippet. But this don´t work if one element of the list are selected. The component don´t show this.

I fork your code https://mdbootstrap.com/snippets/jquery/vilage/1112410, if you can see this.

We are using label tag for select elements, so i include this too.

Best, Otavio


vilage answered 2 years ago

Hello,

I update the snippet, when we put two selects in the same form, one ir required and other not, this don´t function too. And the searcheable option have a problem.

Is this a problem of the select? Or the construction of the html solve this.

Best, Otavio


MDBootstrap staff pro premium answered 2 years ago

Hi vilage,

The problem is your last line of JS code.

$('.mdb-select.select-wrapper .select-dropdown').removeAttr('readonly').prop('required', true).addClass('form-control');

You pick both selects with this line. I fixed this behaviour by inspecting this element and copying the selector to the desired input field. This is not the elegant selector but it surely works in this case:

$('body > form > div:nth-child(1) > div:nth-child(3) > div.select-wrapper.mdb-select.md-form > input')

I forked from your snippet and created ready to use solution}.

You can create a more elegant selector for your needs by for example adding the id to the desired select input field.

Best Regards, Piotr


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.2
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: Yes