Topic: Select input doesn't get 'required' attribute
pavelpossiblep free asked 3 years 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 3 years 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 free commented 3 years ago
I passed validation: true as a parameter and it didn't work. Is there a difference?
Dawid Wajszczuk staff commented 3 years ago
There should be no difference.
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 Standard
- MDB Version: MDB5 3.5.1
- Device: Any
- Browser: Any
- OS: Any
- Provided sample code: No
- Provided link: No