Disable Validation for Save as Draft

[aronduby]

I have a form that has a normal save method which validates and saves with validation errors blocking submissions. But, I need a submission that is Save as Draft that bypasses the validation and submits with errors. The normal save and validate is working great, but I can't seem to find a way to easily turn off validation dynamically.

This is the stripped down version of what I have right now

<template>
    <form @submit.prevent="saveForm">
        
        <!-- a bunch of custom components built around useField -->
        
        <button type="submit" @click="item.draft = true">Save as Draft</button>
        <button type="submit" @click="item.draft = false">Submit</button>
    </form>
</template>
<script setup lang="ts">
    import { useForm } from "vee-validate";
    import { reactive } from "vue";

    const { handleSubmit, isSubmitting, ...formStuff } = useForm();
    
    const item = reactive({
        draft: false
    });
    
    const saveForm = handleSubmit(async () => {
        // do stuff to save here
    })
</script>

[aronduby]

After lots of digging and some minor refactoring I was able to get this working. The key was changing from field based rules and validation to form based since the validationSchema is reactive. Then I can just change the schema to false to make the form skip validation when it's a draft.

My setup script now looks like the following:

import { useForm } from "vee-validate";
import { computed, reactive } from "vue";

const submissionValidation = {
    'consult_patient_name': 'required|min:5',
    'item_name': 'required|min:2',
    'consult_question': 'required|min:5',
    'consult_history': 'required|min:5',
};

// if it's a draft set it to false, so it can bypass validation
// otherwise set it to the actual validation schema
const validationSchema = computed(() =>
    item.draft === true
        ? false
        : submissionValidation
);

const { handleSubmit, isSubmitting } = useForm({ validationSchema });

const item = reactive({
    draft: false
});

const saveForm = handleSubmit(async () => {
    // do stuff to save here
})

[logaretm]

Sorry for the late reply. I would say this is indeed the correct way to handle this with reactive schemas.