Topic: Updated Stepper for v5.7.0
londoh pro asked 5 years ago
I saw that 5.7.0 includes updated stepper with step validation.
This will immediately be very useful. Can the Docs/Api info please be updated ASAP. Or even just a few notes here for temporary info.
Thanks
Magdalena Dembna staff answered 5 years ago
For now the validation stepper example can be seen in our demo app (or in live preview here: https://mdbootstrap.com/previews/templates/vue/#/components/pro/stepper ). The source code below:
<template>
<mdb-card class="indigo lighten-5 pb-5">
<mdb-card-body>
<mdb-stepper
class="pt-5"
buttons
validation
:validatedSteps="validatedSteps"
@validate="validate"
>
<mdb-step name="Personal Information" slot="content" icon="user" :number="1">
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<mdb-card-title>Personal Information</mdb-card-title>
</h3>
<mdb-input required label="First Name" v-model="form[0].name" />
<mdb-input required label="Second Name" v-model="form[0].surname" />
<mdb-input required label="Address" v-model="form[0].address" />
</mdb-step>
<mdb-step name="Company Information" slot="content" icon="pen" :number="2">
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<mdb-card-title>Company Information</mdb-card-title>
</h3>
<mdb-input required label="Company Name" v-model="form[1].company" />
<mdb-input required label="Company Address" v-model="form[1].address" />
</mdb-step>
<mdb-step name="Terms and conditions" slot="content" icon="check" :number="3">
<h3 class="font-weight-bold pt-3 pl-0 my-4">
<mdb-card-title>Terms and conditions</mdb-card-title>
</h3>
<mdb-input
type="checkbox"
id="checkbox3"
required
v-model="form[2].condition"
label="I agree to the terms and conditions"
/>
<mdb-input type="checkbox" id="checkbox4" label="I want to receive newsletter" />
</mdb-step>
</mdb-stepper>
</mdb-card-body>
</mdb-card>
</template>
<script>
import {
mdbStepper,
mdbStep,
mdbInput,
mdbTextarea,
mdbCard,
mdbCardBody,
mdbIcon,
mdbCardHeader,
mdbCardTitle
} from "mdbvue";
export default {
components: {
mdbStepper,
mdbStep,
mdbInput,
mdbTextarea,
mdbCard,
mdbCardBody,
mdbIcon,
mdbCardHeader,
mdbCardTitle
},
data() {
return {
validatedSteps: {},
form: [{
name: '',
surname: '',
address: ''
},
{
company: '',
address: ''
},
{
condition: false
}
]
};
},
methods: {
checkForm(form) {
return Object.keys(form).length === Object.keys(form)
.filter(key => form[key].length > 0).length;
},
validate(e) {
if (e === 3) {
this.validatedSteps[e] = this.form[e - 1].condition;
}
else if (this.checkForm(this.form[e - 1])) {
this.validatedSteps[e] = true;
}
else {
this.validatedSteps[e] = false;
}
}
}
};
</script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB Vue
- MDB Version: 5.6.0
- Device: any
- Browser: all
- OS: every one
- Provided sample code: No
- Provided link: No