Schema blocked to submit form without checked

[yurenlimbu]

What happened?

Hello,
I'm trying to create a validation schema with conditions. Something like a user can pay with credit or card. If the user checked to "Pay with card" the card field is also validated. While I checkbox checked and submit working but without Pay with card submit nothing happens. How can I fix this?

Reproduction steps

<template>
  <vee-form :validation-schema="schema" @submit="onSubmit">
      <vee-field type="text" v-model="price" name="price" placeholder="Apply Credit"/>
      <label>
          <input type="checkbox" v-model="check" /> Pay with card
      </label><br>
      <div v-if="check" class="p-5 bg-gray-50">
          <vee-field type="text" v-model="card" name="card" placeholder="Card Number"/>
      </div>
      <button type="submit">Submit</button>
  </vee-form>
</template>

<script>
export default {
    data() {
        const schema = {
            price: 'required',
            card: 'required'
        }
        return {
            schema,
            check: false,
            price: '',
            card: ''
        }
    },
    methods: {
        onSubmit(values) {
            console.log(values)
        }
    }
}
</script>

<style>
input[type="text"]{
    border: gray 1px solid;
    padding: .5rem 1rem;
    width: 100%;
}
button[type="submit"]{
    background-color: rgb(12, 160, 110);
    color: white;
    padding: .5rem 1rem;
}
</style>

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://codesandbox.io/s/vue-vee-validate-g3cnn

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

I converted this issue to a discussion since it is better suited. This behavior is intended, your schema needs to match whatever you have. So if card is required and is not shown, it will still block the submission because it doesn't exist.

You can create a computed schema and include the card validation if the check variable is set.

In the future you can always check the errors to make sure you don't have dangling rules or you can also use the Vue devtools with vee-validate.

Here is the example:

https://codesandbox.io/s/vue-vee-validate-forked-mjurj?file=/src/components/HelloWorld.vue

[yurenlimbu]

Thank you!