formtype v0.0.2

formtype

Create html-only validated forms derived from @sinclair/typebox schemas.

How To Use

import { Type as t } from "@sinclair/typebox";
import { toFormElems } from "formtype"

const schema = t.Object({
  name: t.String({ minLength: 3, maxLength: 30 }),
  password: t.String({ minLength: 8, maxLength: 128, format: "password" })
})

const formElems = toFormElems(schema) /* {
  name: "<input type=\"text\" name=\"name\" id=\"name\" minlength=\"3\" maxlength=\"30\" required=\"true\"></input>",
  password: "<input type=\"password\" name=\"password\" id=\"password\" minlength=\"8\" maxlength=\"128\" required=\"true\"></input>"
} */

const signUpFormValidator = t.Object({ username: t.String({ minLength: 5, maxLength: 35, placeholder: "Create a unique username" }), age: t.Optional(t.Integer({ placeholder: "Enter your age (Optional)" })), password: t.String({ format: "password", minLength: 8, maxLength: 128, placeholder: "Create a unique password", pattern: "^(?=.?A-Z)(?=.?a-z)(?=.?0-9)(?=.?#?!@$%^&*-).$", title: "Password must contain at least: one special character, one number, one lowercase letter, and one uppercase letter.", }), confirmPassword: t.String({ format: "password", minLength: 8, maxLength: 128, placeholder: "Confirm your unique password", pattern: "^(?=.?A-Z)(?=.?a-z)(?=.?0-9)(?=.?[#?!@$%^&-]).*$", title: "Password must contain at least: one special character, one number, one lowercase letter, and one uppercase letter.", }), csrfToken: t.Readonly(t.String({ default: "no csrf token provided", hidden: true })) })

const formElems = toFormElems(signUpFormValidator)

const html = `

Bun.serve({ fetch(req) { return new Response(html, { headers: { "content-type": "text/html" } }) } })

</details>