Topic: make multiselect a required form field
nskalis free asked 5 years ago
Hi,
If we consider the example Multiselect with options groups in https://mdbootstrap.com/docs/jquery/forms/multiselect/
Expected behavior
In case of an input
field, the option required
works as expected. Displaying a tooltip ("Fill out this field") and not submitting the form.
In case of a select
field with the multiple
, the option required
has no effect and the form is submitted.
Actual behavior
When adding the required
option and the user does not select any option, when clicking the submit
button, there should be a tooltip displayed like "Fill out this field" and not submit the form.
Resources (screenshots, code snippets etc.)
<select name="netelement_location" form="bgp_lookup" class="mdb-select md-form" multiple required>
Can you please advise how to solve this in case of multiselect ?
nskalis free answered 5 years ago
thanks, is it possible to display sth like this ?
(this appears if I remove the multi select and use the required
option)
it is not a tooltip, because it appears differently among browsers
Mateusz Łubianka staff commented 5 years ago
Hi,
Unfortunately we don't have any options to different display of multiselect validate labels.
Best,
Mateusz Łubianka staff answered 5 years ago
Hi @nskalis
I created a snippet with example code. Check out this link: https://mdbootstrap.com/snippets/jquery/mateusz-lubianka/1533756?action=forum_snippet
Best,
nskalis free commented 5 years ago
Thanks @Mateusz Łubianka what $('.needs-validation').addClass('was-validated');
actually does ?
Mateusz Łubianka staff answered 5 years ago
Hi,
You can try to use validate option. Options for multiselect are the same like for select and you can find them here: https://mdbootstrap.com/docs/jquery/forms/select/#validation Try to use validate option and let me know, how it works.
Best
nskalis free commented 5 years ago
Thanks. Using it as
<select name="netelement_location" form="bgp_lookup" class="mdb-select md-form validate" multiple required>
together with
$(document).ready(function() {
$('.mdb-select').materialSelect({ visibleOptions: 15, validate: true });
$('.select-toggle-all').css("display", "none");
});
the form still gets submitted if no option is chosen. what I am doing wrong ?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.10.0
- Device: all
- Browser: all
- OS: all
- Provided sample code: Yes
- Provided link: Yes