Validation de formulaire
Une seule v.object({…}) décrit le schéma ; le serveur valide, retourne toutes les erreurs par champ en une passe ainsi que les valeurs soumises. La page lit les deux via actionData, affiche les champs en erreur et conserve la saisie. Une soumission valide déclenche une redirection 303 — distinction nette entre échec et succès.
Astuce
La validation vient de @bext-stack/framework/validation : le même primitif typé et sans dépendance que n'importe quel site PRISM. Chaque champ signale toutes ses erreurs en une passe ; errorsByField renvoie la première par champ (l'ordre des règles donne « requis puis format » gratuitement) et result.data est typé et converti (age est un number).
Essayez
Ce formulaire utilise le primitif v.object({…}) du framework — plus de validate() écrit à la main.
Essayez de soumettre un formulaire vide, avec un e-mail invalide ou un nom trop court.
import { v, validate, errorsByField } from "@bext-stack/framework/validation";
// One typed schema — every failing field reports in a single pass.
const Signup = v.object({
email: v.string().trim().nonempty().email(),
username: v.string().trim().min(3).regex(/^[a-z0-9_]+$/i),
age: v.number().int().min(13).max(120),
});
export async function action({ request }) {
const result = await validate(request, Signup); // reads FormData | JSON
if (!result.ok) {
// re-render with per-field errors + the user's typed values
return { ok: false, errors: errorsByField(result.errors) };
}
const user = result.data; // { email, username, age: number } — typed & coerced
await createUser(user);
return new Response(null, { status: 303, headers: { Location: "/welcome" } });
}Un projet exécutable de cet exemple, ouvert dans l'éditeur bext play — modifiez le code, l'aperçu se met à jour.
Modifiable en direct — l'aperçu se recompile à chaque frappe.