Bootstrap-multiselect: Question: An invalid form control with name='xxxx' is not focusable

Created on 11 May 2016 · 6Comments · Source: davidstutz/bootstrap-multiselect

Hi friends, perhaps I'm missing something in the documentation but for some reason when I apply the required attribute to the select and try to submit the form, when no options have been selected, nothing happens and an error message Question: An invalid form control with name='xxxx' is not focusable appears. Any tips are appreciated. Thank you.

bug

Source

fitucated

Most helpful comment

This error occurs because of the "required" attribute on the element. Since this component hide the select element, when the browser trying to validate the form prior to the submit event it cannot set the focus on a hidden input hence the error.

For more info see:

The solution is to remove "required" attribute on the select element OR add "novalidate" to the form. The first choice would be preferable, and implement another method for "required" validation.

// for now you can do this to by pass the bug
$(selector).multiselect(options).prop('required', false);

ddang77 on 15 Aug 2016

👍3 ❤1

I'm also having the issue. The setup is completely standard and used on modern browsers. The only thing which would indicate a problem is this warning in the console on page load.

Please do not use Bootstrap-checkbox element in label element.

The required attribute only becomes problematic once the $('#item).multiselect(); is applied to the select element.

marcelgruber on 17 Aug 2016

This likely happens because of library / plugin conflicts. This attribute should work 100% fine if you're not running and initializing any other plugins on the page you're working on. More info in issue #798.

marcelgruber on 4 Sep 2016

Was this page helpful?

0 / 5 - 0 ratings