Topic: Make mdb-select required
Expected behavior
mdb-select vue component to be required in a form when wanted. How do I do this without having to edit the dom when the app renders?
Actual behavior
mdb-select vue component does not render with required html attribute
Resources (screenshots, code snippets etc.)
Here is how my select options are being rendered, assume the variables render correct data
units.forEach((unit) => {
this.unit_options.push({
'text': 'Building: ' + unit.building + ' Unit: ' + unit.unit_number,
'value': unit.id,
})
});
this.unit_options = [{
'text': 'This is for a Property',
'value': '',
}, ...this.unit_options]
<mdb-select v-model="unit_options" ref="unit_select" label="Select a Unit" icon="hand-pointer" validation required></mdb-select>
mdbSelect doesn't have a property required - the list of all properties can be found here: https://mdbootstrap.com/docs/vue/forms/select/ in the API tab. We offer this way of visual validation:
<mdb-select v-model="validateOptions" validation ref="validationSelect" resetBtn label="validate"/>
<mdb-btn size="sm" color="primary" @click.native="$refs.validationSelect.validate()">Validate</mdb-btn>
data() {
return {
validateOptions: [
{ text: 'Option nr 1', value: 'Option 1' },
{ text: 'Option nr 2', value: 'Option 2' },
{ text: 'Option nr 3', value: 'Option 3' },
{ text: 'Option nr 4', value: 'Option 4' },
{ text: 'Option nr 5', value: 'Option 5' }
],
}
}
To stop a form from submitting without a selected value, you need to preventDefault() if none of the options is selected. Kind regards, Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.1.0
- Device: pc
- Browser: Chrome
- OS: Linux
- Provided sample code: No
- Provided link: No