Topic: MDBStepper and vee-validate

Tobias.Weber priority asked 1 year ago


Steps to reproduce the error:

  1. type in test1 in input1,
  2. click on Next Step
  3. click on Previous Step
  4. Remove some Characters from input1

Expected behavior Color from MDBInput will change to red if value is not valid

Actual behavior Color will not change anmyore

I don't know how to fix the style error.

Resources (screenshots, code snippets etc.)

<script setup>
import { reactive, ref } from 'vue'
import {
    MDBBtn,
    MDBContainer,
    MDBInput,
    MDBStepper,
    MDBStepperContent,
    MDBStepperForm,
    MDBStepperHead,
    MDBStepperStep,
} from 'mdb-vue-ui-kit'

import { useForm, Field } from 'vee-validate'
import { defineRule } from 'vee-validate'
import { required, min, max, min_value, max_value } from '@vee-validate/rules'

defineRule('required', required)
defineRule('min', min)
defineRule('max', max)
defineRule('min_value', min_value)
defineRule('max_value', max_value)

const form = reactive({
    input1: '',
    input2: '',
    input3: '',
})

const formComplete = ref(false)
const formWizardRef = ref()

const validatedStep1 = ref(false)
const validatedStep2 = ref(false)
const validatedStep3 = ref(false)

const prevStep = () => {
    formWizardRef.value.prevStep()
}
const nextStep = () => {
    formWizardRef.value.nextStep()
}

const { handleSubmit } = useForm()

const validSubmit1 = () => {
    validatedStep1.value = true
    console.log('valid')
    nextStep()
}

const invalidSubmit1 = () => {
    validatedStep1.value = true
    console.log('invalid')
}

const validSubmit2 = () => {
    validatedStep2.value = true
    console.log('valid')
    nextStep()
}

const invalidSubmit2 = () => {
    validatedStep2.value = true
    console.log('invalid')
}

const validSubmit3 = () => {
    validatedStep3.value = true
    console.log('valid')
    nextStep()
}

const invalidSubmit3 = () => {
    validatedStep3.value = true
    console.log('invalid')
}

const checkForm1 = handleSubmit(validSubmit1, invalidSubmit1)
const checkForm2 = handleSubmit(validSubmit2, invalidSubmit2)
const checkForm3 = handleSubmit(validSubmit3, invalidSubmit3)

const test = ref(true)
</script>

<template>
    <MDBContainer>
        <MDBStepper linear ref="formWizardRef" id="stepper" v-if="!formComplete">
            <MDBStepperStep active>
                <MDBStepperHead icon="1"></MDBStepperHead>
                <MDBStepperContent>
                    <form novalidate @submit.prevent="checkForm1">
                        <Field
                            name="form.input1"
                            rules="required|min:5|max:500"
                            v-model="form.input1"
                            v-slot="{ errorMessage }">
                            <MDBInput
                                v-model="form.input1"
                                type="text"
                                label="input1"
                                wrapperClass="mb-2"
                                :is-valid="!Boolean(errorMessage)"
                                :isValidated="validatedStep1"
                        /></Field>

                        <MDBBtn color="primary" class="w-40" type="submit"> Next step </MDBBtn>
                    </form></MDBStepperContent
                >
            </MDBStepperStep>
            <MDBStepperStep
                ><MDBStepperHead icon="2"></MDBStepperHead>
                <MDBStepperContent
                    ><form novalidate @submit.prevent="checkForm1">
                        <Field
                            name="form.input2"
                            rules="required|min:5|max:500"
                            v-model="form.input2"
                            v-slot="{ errorMessage }"
                            ><MDBInput
                                v-model="form.input2"
                                type="text"
                                label="input2"
                                wrapperClass="mb-2"
                                :is-valid="!Boolean(errorMessage)"
                                :isValidated="validatedStep2"
                        /></Field>
                        <MDBBtn color="primary" class="w-40" @click="prevStep()">
                            Previous step </MDBBtn
                        ><MDBBtn color="primary" class="w-40" type="submit"> Next step </MDBBtn>
                    </form></MDBStepperContent
                >
            </MDBStepperStep>
            <MDBStepperStep
                ><MDBStepperHead icon="3"></MDBStepperHead>
                <MDBStepperContent
                    ><form novalidate @submit.prevent="checkForm1">
                        <Field
                            name="form.input3"
                            rules="required|min:5|max:500"
                            v-model="form.input3"
                            v-slot="{ errorMessage }"
                            ><MDBInput
                                v-model="form.input3"
                                type="text"
                                label="input3"
                                wrapperClass="mb-2"
                                :is-valid="!Boolean(errorMessage)"
                                :isValidated="validatedStep3"
                        /></Field>
                        <MDBBtn color="primary" class="w-40" @click="prevStep()">
                            Previous step
                        </MDBBtn>
                        <MDBBtn color="success" class="w-40" type="submit"> Next Step </MDBBtn>
                    </form>
                </MDBStepperContent>
            </MDBStepperStep>
            <MDBStepperStep
                ><MDBStepperHead icon="4"></MDBStepperHead>
                <MDBStepperContent>
                    <pre>{{ form }}</pre>
                    <MDBBtn color="primary" class="w-40" @click="prevStep()">
                        Previous step
                    </MDBBtn>
                    <MDBBtn color="success" class="w-40"> Submit </MDBBtn>
                </MDBStepperContent>
            </MDBStepperStep>
        </MDBStepper>

        <pre>{{ form }}</pre>
    </MDBContainer>
</template>

Bartosz Cylwik staff answered 1 year ago


Hi, try removing linear prop from MDBStepper component. That should disable our basic validation and let you use your custom one.

Best Regards!


Tobias.Weber priority commented 1 year ago

Great support - it works!



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 3.2.0
  • Device: Windows
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No