@k8ordo/form

zodスキーマ1つから、HTMLの制約属性・エラーメッセージ・サーバー検証を導きます。値はDOMが持つので、JavaScriptが落ちていても読み込み前でもフォームは動きます。

このページで動いています

下のフォームは GET で送信し、この URL の search params に着地します。制約属性は Server Component で formFields(demoState.url) が導いたもので、同じスキーマを @k8ordo/state の definePageState が読み返します。フォームが書いた URL と state が読んだ値が一致していることを、下の行で確かめられます。

URL: クエリなし（すべて default）
state: {"q":"","min":0}

このサイトは @k8ordo/static で焼かれているので Server Action はありません。GET フォームは本体を持たないのでルーターが intercept し、同じ pathname への遷移は状態の更新として扱われます。JavaScript を切っても、同じフォームが同じ URL に着きます。min に -1 を入れると、ブラウザの制約検証がスキーマと同じ文言で止めます。

特徴

出所はスキーマ1つrequired も maxLength も type も、書いたスキーマから降ってきます。JSXとサーバーに同じ制約を二重に書く必要がありません。
JavaScriptが無くても動く送信は Server Action が受けます。エラーはフィールド単位で返り、入力値も戻るので、やり直しで打ち直しになりません。
値はDOMが持つ入力のたびに再描画が起きません。値がReactのstateに載ることはなく、載るのは表示中のエラーや行の識別子といった、DOMが表現できないものだけです。
パスが型で守られるfield('titel') のような打ち間違いは、動かす前にコンパイルが止めます。ネストしたパスも配列との取り違えも同じように落ちます。
黙って壊れないスキーマにある欄が送信されていなければ、検証の失敗ではなく結線の誤りとして知らせます。制約属性に落ちなかった検証も一覧で報告します。
秘密は返さないやり直しのために入力値を返しますが、パスワード欄は自動で除きます。属性を生成したのがform自身なので、指定を書き忘れる事故が起きません。

ドキュメント

設計ガイドとリファレンスは npm パッケージに同梱されています。AIコーディングエージェントは node_modules/@k8ordo/form/docs/ からインストールした版そのものを読みます。

Home