Vee-Validate 4 — отключить проверку для сохранения как черновика

У меня есть форма с обычным методом сохранения, который проверяет и сохраняет ошибки проверки, блокирующие отправку. Но мне нужна отправка «Сохранить как черновик», которая обходит проверку и отправляется с ошибками. Обычное сохранение и проверка работают отлично, но я не могу найти способ легко отключить динамическую проверку.

Это урезанная версия того, что у меня есть сейчас:

<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>

vue.js vee-validate

13.10.2022 21:09

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

140

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Быть «тем парнем», который сам отвечает на свой вопрос, лучше, чем «тем парнем», который просто говорит, что решил его, я думаю...

После долгих копаний и небольшого рефакторинга я смог заставить это работать. Ключ менялся от правил и проверки, основанных на полях, к основанным на форме, поскольку validationSchema является реактивным. Затем я могу просто изменить схему на false, чтобы форма пропускала проверку, когда это черновик.

Мой сценарий установки теперь выглядит следующим образом:

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
})

17.10.2022 22:05

Другие вопросы по теме

Vue: тип «Ref<unknown>» не может быть назначен типу «string».ts(2322)

Сообщение axios, чтобы узнать, действительны ли данные

Добавьте новую строку для возврата внутри метода

Vee Validate обрабатывает динамические строки ввода

Переименовать ответы проверки в laravel

Как сбросить валидацию после отправки формы?

Как создать правильное правило для проверки нуля через vee-validate

Как решить ошибку проверки после отправки

Использование vue.js и vee-validate, проверка даты с использованием after: и вычисляемое поле, похоже, не работает

Как изменить мой пользовательский компонент ввода для работы с vee-validate?

Vee-Validate 4 — отключить проверку для сохранения как черновика

Ответы 1

Другие вопросы по теме

Похожие вопросы