Multi-step forms

A long form is easier to split into steps. One schema and one form for all steps, and form.validate(paths) checks only the current step's fields — the user won't see errors from later steps too early.

Example

<script setup lang="ts">
import { ref } from 'vue';
import { object, string, pipe, email, minLength, coerce, literal } from 'tinyval';
import { useForm } from 'tinyval-vue';

const Order = object({
  name: pipe(string(), minLength(2)),
  email: pipe(string(), email()),
  city: string(),
  address: string(),
  date: coerce.date(),
  terms: literal(true),
});

const steps = [['name', 'email'], ['city', 'address'], ['date', 'terms']];
const step = ref(0);

const form = useForm(Order, {
  initial: { name: '', email: '', city: '', address: '', date: '', terms: false },
});

async function next() {
  if (await form.validate(steps[step.value])) step.value++;
}

const submit = form.handleSubmit((data) => api.post('/orders', data));
</script>

<template>
  <form @submit="submit">
    <template v-if="step === 0">
      <input v-model="form.values.name" name="name" />
      <input v-model="form.values.email" name="email" />
    </template>
    <!-- … -->
    <button v-if="step > 0" type="button" @click="step--">Back</button>
    <button v-if="step < steps.length - 1" type="button" @click="next">Next</button>
    <button v-else :disabled="form.submitting">Place order</button>
  </form>
</template>

• validate(paths) marks the step's fields as touched — their errors become visible — and returns true if those fields have no errors.
• A path can point to a nested object or array: validate(['address']) checks address.city, address.street and so on.
• On the last step handleSubmit validates the whole form — if the user went back and broke something, it won't slip through.

See also

• useForm — validate
• Editing & drafts — keep the input between steps across reloads