Topic: Select and Multiselect Validation
I can't validate select nor multiselect with standard validation JS (input, datepicker work fine)
<!-- Game type -->
<div class="md-form">
<i class="fas fa-plus prefix"></i>
<select id="type" class="mdb-select colorful-select dropdown-success mx-auto"
name="type" required>
<option value="" selected>Choose type of game</option>
<option value="type1"
<option value="type2"
<option value="type3"
</select>
<span class="invalid-feedback" role="alert">
<strong class="ml-5">Choose type</strong>
</span>
</div>
<!-- Game category -->
<div class="md-form">
<i class="fas fa-plus prefix"></i>
<select id="category" class="mdb-select colorful-select dropdown-success mx-auto"
name="category[]" multiple>
<option value="" selected>Choose categories</option>
<option value="cat1" data-type="cat-type"
<option value="cat2" data-type="cat-type"
<option value="cat3" data-type="cat-type"
</select>
<span class="invalid-feedback" role="alert">
<strong class="ml-5">Choose at least two</strong>
</span>
</div>
Could I ask for help with that? I assumed that will work "out of the box", but it doesn't, or I do something wrong?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.6
- Device: Laptop
- Browser: Firefox
- OS: Ubuntu
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 years ago
did you use this example? https://mdbootstrap.com/docs/jquery/forms/validation/?#select
https://mdbootstrap.com/snippets/jquery/piotr-glejzer/646536 it's working fine in snippets
fmaeseele pro commented 5 years ago
Hi, The materialSelect validation described in the doc is totally useless. In a normal use case, the form would probably be inside a modal dialog, so you have to trigger a form reset before displaying the modal, then it calls the init of the material select, and the component doesn't work anymore: no placeholder displayed, no save button displayed, etc... You should do better testing before releasing code, or at least look to integrate the fixes some customers provide. Do remember that in most cases, your examples are out of use cases, so it may help using it, but do not reflect how your components are used.
Piotr Glejzer staff commented 5 years ago
For this moment we don't have a better solution for that. I added the task to make a better approach in the future. Have a nice day.
Kneidels pro commented 5 years ago
Have there been any improvements on this yet?
Sebastian Kaczmarek staff commented 5 years ago
I'm afraid I don't fully understand OP's problem. As shown in e.g. this Snippet: https://mdbootstrap.com/snippets/jquery/s-kaczmarek/1428173 the validation seems to work fine in the latest 4.9.0 version. Is that what you are looking for? Or is it something else (try to describe current and expected behavior)?