FormKit（フォームキット）：その他の機能

入力連動グループ

通常、各項目は入力後にフォーカスが外れるとバリデートが始まります。ところが、複数の入力項目を入力中は同じグループに所属する要素のバリデートを待って欲しい場合があります。この場合、以下のような書き方で、入力状態を連動させることができます。 

<div data-fk-group>
  <input type="text" name="mail_head">
  <?= $mail_head->marker_tag() ?>
  ＠
  <input type="text" name="mail_host">
  <?= $mail_host->marker_tag() ?>
  <?= $mail_head->error_tag() ?>
  <?= $mail_host->error_tag() ?>
</div>
'mail_head' => REQ(),
'mail_host' => REQ(),

サブバリデート

例えば上の例で言うと、２つの入力欄をまとめてメールアドレスかどうかチェックしたいですよね？そういった、要素ごとのチェック以外に、まとめてチェックしたい場合に定義できます。エラーメッセージを１つにまとめるのにも利用できます。 

<div data-fk-group="_mail">
  <input type="text" name="mail_head">
  ＠
  <input type="text" name="mail_host">
  <?= $_mail->marker_tag() ?>
  <?= $_mail->error_tag() ?>
</div>
			
'mail_head' => REQ(),
'mail_host' => REQ(),
'_mail' => GLUE('@', 'mail_head','mail_host') -> MAIL(),

また、data-fk-with 属性を使うことで、入力連動グループ化せずにサブバリデート化することもできます。 

<div>
  <input type="text" name="mail_head" data-fk-with="_mail">
  ＠
  <input type="text" name="mail_host" data-fk-with="_mail">
  <?= $_mail->marker_tag() ?>
  <?= $_mail->error_tag() ?>
</div>

他に使えるサブバリデート用のメソッドは、バリデートメソッドを参照してください。

郵便番号自動入力

外部JavaScriptとして、ajaxzip3を利用した郵便番号自動入力が可能です。郵便番号の入力要素またはグループタグに data-fk-ajaxzip 属性を設定することで、郵便番号を入力しフォーカスが移動した際に都道府県・住所の途中まで自動的に挿入されます。 

<div>
  <div data-fk-group="_zip" data-fk-ajaxzip="'zip1','zip2','pref','address1'">
    〒 <input type="text" name="zip1" size="4" value="<?= $zip1 ?>">
    -
    <input type="text" name="zip2" size="4" value="<?= $zip2 ?>">
    <?= $_zip->marker_tag() ?>（例：000-0000）
  </div>
  都道府県
  <select name="pref">
    <option value="">（１つ選択して下さい）</option>
    <?= \FK\pref_options_tag($pref) ?>
  </select>
  <?= $pref->marker_tag() ?>
  <?= $pref->error_tag() ?>
  <br>
  市区町村/番地 <input type="text" name="address1" value="<?= $address1 ?>">
  <?= $address1->marker_tag() ?>
  <?= $address1->error_tag() ?>
  <br>
  建物名/階など <input type="text" name="address2" value="<?= $address2 ?>">
  <?= $address2->marker_tag() ?>
  <?= $address2->error_tag() ?>
</div>

尚、data-fk-ajaxzip 属性に設定する値ですが、ajaxzip3の引数と同じ構成にしてますので、例えば郵便番号入力欄が２つでなく１つにまとまっている場合は、 data-fk-ajaxzip="'zip','','pref','address1'" で対応できます。

リアルタイムバリデートJavaScriptにフックする

入力要素を変更・フォーカスアウト、またはフォームを送信しようとした際にリアルタイムバリデートが発生しますが、それぞれの処理ポイントで独自の関数を実行させることができ、自作JSとの連帯しやすくなっています。以下、フック可能な一覧とサンプルです。

フックポイント 解説
$fk.hook.on_init_before 初期設定前
$fk.hook.on_init_after 初期設定完了時
$fk.hook.on_form_submit_before フォーム送信ボタン押下時（引数は対象のformオブジェクト）
$fk.hook.on_form_submit_after フォーム送信直前（引数は対象のformオブジェクト）
$fk.hook.on_form_send フォーム送信完了時（引数は対象のformオブジェクト）
$fk.hook.on_ajax_before リアルタイムバリデートAjax通信前（引数は送信するデータオブジェクト）
$fk.hook.on_ajax_after リアルタイムバリデートAjax通信完了時（引数はAjaxの返り値：Deferred Objectオブジェクト） 
～
<script src="formkit/app/fk.js"></script>
<script>
function formkit_config(){
	// フォーム送信ボタン押下時（引数は対象のformオブジェクト）
	$fk.hook.on_form_submit_before = function(form){
		// ここに処理
	};

	// フォーム送信直前（引数は対象のformオブジェクト）
	$fk.hook.on_form_send = function(form){
		// ここに処理
	};

	// フォーム送信完了時（引数は対象のformオブジェクト）
	$fk.hook.on_form_submit_after = function(form){
		// ここに処理
	};

	// リアルタイムバリデートAjax通信前（引数は送信するデータオブジェクト）
	$fk.hook.on_ajax_before　= function(senddata){
		// ここに処理
	};

	// リアルタイムバリデートAjax通信完了時（引数はAjaxの返り値：Deferred Objectオブジェクト）
	$fk.hook.on_ajax_after = function(defer){
		// ここに処理
	};
}
</script>

ちなみに、上記のように formkit_config() 関数を定義すると、fk.js ロード完了後に処理を実行できます。

formaction属性について

この formaction 属性は、送信ボタンが押された時に、指定されたURLに <form> タグの action 属性を書き換えてから送信するというものです。 

<div class="submit">
	<button formaction="index.php?revalidate">前の画面へ</button>
	　　　
	<button formaction="thanks.php">送信する</button>
</div>
通常 formaction 属性はHTML5から `<input>` タグで記述できるようになったものですが、fk.js をロードすることで、IEの古いバージョンでも、 <button> タグにでも書けるようになります。