make multiselect a required form field

Topic: make multiselect a required form field

nskalis 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 ?

Add comment

Mateusz Łubianka staff answered 5 years ago

0 0 Best answer

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 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 ?

Add comment

Mateusz Łubianka staff answered 5 years ago

0 0 Best answer

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 commented 5 years ago

Thanks @Mateusz Łubianka what $('.needs-validation').addClass('was-validated'); actually does ?

Add comment

nskalis answered 5 years ago

0 0 Best answer