FormFx は、チェックや選択に応じてフォームが動的に変わる場面を、
Alpine.jsやjQueryの「ifだらけ」から救うための軽量ライブラリです。
eval不使用でCSP環境にも対応し、安全かつ宣言的にフォームを整理します。
<input id="hasInjury" type="checkbox">
<section data-fx-show="#hasInjury == true"
data-fx-required="#hasInjury == true">
<input name="injury_detail">
</section>
<script type="module">
import { FormFx } from "formfx";
new FormFx(document.querySelector("form")).mount();
</script>フォーム作者はJSを書かずに data-fx-* で制御できます。
eval禁止。パーサ＋評価器で条件式を安全に処理します。
JSONルール、デバッグ表示、履歴/監査など（拡張）を見据えた設計。
npm または CDN で導入できます。
npm install formfx<script src="https://unpkg.com/formfx@1.0.2/dist/index.global.js"></script>CDN等でライブラリを読み込み、対象のフォームに対して new FormFx(el).mount() を呼び出すだけで利用できます。
<!-- 1. ライブラリの読み込み -->
<script src="https://unpkg.com/formfx/dist/index.global.js"></script>
<!-- 2. HTML属性でルールを記述 -->
<form id="sample-form">
<input id="check" type="checkbox"> 承諾する
<div data-fx-show="#check == true">
<input name="msg" data-fx-required="#check == true">
</div>
</form>
<!-- 3. 初期化 -->
<script>
new FormFx(document.querySelector("#sample-form")).mount();
</script>| 属性 | 説明 | 例 |
|---|---|---|
| data-fx-show | 式が true のとき表示。false のとき非表示。 | #hasInjury == true |
| data-fx-required | 式が true のとき required を付与。 | #severity == 'high' |
| data-fx-disabled | 式が true のとき disabled を付与。 | #mode == 'readonly' |
| data-fx-clear-on-hide | 非表示になったとき値をクリア（オプション）。 | true |
最大N件の入力欄を追加できます（例：関連患者、関与スタッフ、要因など）。
<div data-fx-repeater data-fx-name="patients" data-fx-max="3">
<button type="button" data-fx-add>追加</button>
<div data-fx-list></div>
<template data-fx-template>
<div data-fx-item>
<input data-fx-field name="id" placeholder="患者ID">
<input data-fx-field name="note" placeholder="備考">
<button type="button" data-fx-remove>削除</button>
</div>
</template>
</div>
nameの採番戦略（例：patients[0].id）は設定で変更可能にする設計が推奨です。
大規模フォームではルールを一箇所で集中管理できます（高度な使い方）。
const fx = new FormFx(form, {
rules: [
{
id: "injury-rule",
if: "#hasInjury == true",
then: [
{ show: "#injuryBlock" },
{ require: "#injuryDetail" }
],
else: [
{ hide: "#injuryBlock" }
]
}
]
});
fx.mount();例：チェックボックス、セレクト、文字列比較など。
#hasInjury == true
#severity == 'high' && #needCall == true
(#type == 'drug' || #type == 'device')empty() や len() などの関数拡張の実装も予定しています。
実際に動作するデモです。チェックボックスや選択肢に応じて表示が切り替わります。
new FormFx(formElement, options)fx.mount()
fx.destroy(){
disableOnHide: true, // 非表示時に配下をdisabledにして送信/検証から外す
clearOnHide: false, // 非表示時に値をクリア
// rules: [...], // JSON rules（高度）
// debug: true // デバッグ（高度）
}