Select input doesn't get 'required' attribute


Topic: Select input doesn't get 'required' attribute

pavelpossiblep asked a year ago

Expected behavior When I add attribute 'required' to a select I expect to have that attribute appear on the tag that my tag is transformed to.

Actual behavior That doesn't happen, thus my select neither prevents my form from submitting nor shows a popup ('invalid element' error appears in console)

Resources (screenshots, code snippets etc.) I use such code to initialise all my selects:

<select class="select-input" id="...." name="...." required="required">
    <option disabled>Please select something</option>
    <option>...</option>
</select>
<!-- label etc -->

<script>
    function getDefaultSelectProps() {
        return {
            noResultText: 'Ничего не найдено./Nothing found.',
            searchPlaceholder: 'Искать/Search...',
            optionsSelectedLabel: 'Выбрано/selected',
            selectAllLabel: 'Выбрать все/Select all',
            visibleOptions: 7,
            optionHeight: 44
        };
    }

    $(document).ready( function() {
        const selects = document.querySelectorAll('.select-input');
        selects.forEach( element => {
            let props = getDefaultSelectProps();
            if ( element.getAttribute( "data-mdb-filter" ) === true || element.getAttribute( "data-mdb-filter" ) === 'true' ) {
                props.filter = true;
            }
            const simpleSelect = new mdb.Select( element, props);
            if ( element.id != null ) {
                //some custom logic for click handling
            }
        } )
    } )
</script>

which for whatever reason gets transformed to something like this:

<div id="select-wrapper-12345" class="select-wrapper">
    <div class="form-outline>
        <input class="form-control select-input active" type="text" role="listbox" aria-multiselectable="false" aria-disabled="false" aria-haspopup="true" aria-expanded="false" readonly>
        <!-- label, select-arrow, form-notch -->
    </div>
    <select class="select-input select-initialized" required>
        <!-- my select -->
    </select>
</div>

which is not in any way required from the default browser form


Dawid Wajszczuk staff answered a year ago

Hi,

Try using data-mdb-validation="true". More information can be found here https://mdbootstrap.com/docs/standard/forms/select/#section-validation.

Keep coding,
Dawid


pavelpossiblep commented a year ago

I passed validation: true as a parameter and it didn't work. Is there a difference?


Dawid Wajszczuk staff commented a year ago

There should be no difference.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: MDB5 3.5.1
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No