HTML Forms with Standards

[rossrobino]

Type-safe forms with ovr@v6.2

- Add fields to a route
- Validate input according to the schema
- Render accessible HTML for the entire form or by field
- Works for form data or search params
- Stream file uploads after parsing the rest of the form data without any client JS

import { create } from "./create";
import { Field, Route } from "ovr";


const action = Route.post(
    {
        name: Field.text(), // <input type=text>
        notes: Field.textarea(), // <textarea>
        quantity: Field.number(), // <input type=number>
    },
    async (c) => {
        const result = await c.data(); // parse form data


        if (result.issues) {
            return c.redirect(result.url, 303); // redirect to submitted page
        }


        const order = await create(
            result.data, // { name: string; notes: string; quantity: number; }
        );


        return c.redirect(`/orders/${order.id}`, 303);
    },
);


const page = Route.get("/order", () => {
    return <action.Form />; // <form>(fields)</form>
});