Validation

Handle validation errors and error bags with Inertia.

See also

Official Inertia.js docs: Validation

How Validation Works

Inertia expects validation errors to be returned with the next page response. Litestar-Vite stores errors in the session and includes them in the errors prop on the next Inertia response.

Backend Usage

Use the error() helper for custom validation, then return InertiaBack or InertiaRedirect:

from litestar import post
from litestar.request import Request
from litestar_vite.inertia import error, InertiaBack, InertiaRedirect

@post("/users")
async def create_user(request: Request) -> InertiaBack:
    data = await request.json()

    if await User.email_exists(data["email"]):
        error(request, "email", "Email already exists")
        return InertiaBack(request)

    await User.create(**data)
    return InertiaRedirect(request, "/users")

Errors are available on the frontend as page.props.errors.

Litestar Validation

Litestar can validate request bodies with any supported data type (dataclasses, attrs classes, TypedDicts, Pydantic models, msgspec, and more). Map those validation errors into error() calls or return InertiaBack from an exception handler to keep the error response in the Inertia flow.

Error Bags

Use error bags to isolate errors for multiple forms:

import { useForm } from "@inertiajs/react";

const form = useForm({ name: "", email: "" });

form.post("/users", { errorBag: "createUser" });

<script setup lang="ts">
import { useForm } from "@inertiajs/vue3";

const form = useForm({ name: "", email: "" });

form.post("/users", { errorBag: "createUser" });
</script>

When using an error bag, errors are nested under errors.createUser.

Displaying Errors

import { usePage } from "@inertiajs/react";

const { errors } = usePage().props;

{errors.email && <span>{errors.email}</span>}

<template>
  <span v-if="$page.props.errors.email">{{ $page.props.errors.email }}</span>
</template>

Clearing Errors

Clear errors after handling them:

form.clearErrors();

form.clearErrors();

See Also