Make mdb-select required


Topic: Make mdb-select required

mhoskins free asked 2 years ago

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>

Magdalena Dembna staff answered 2 years ago

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


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 Vue
  • MDB Version: 6.1.0
  • Device: pc
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No