コンバーター

espar form では、フォームで入力された文字列をルールに沿って自動変換するコンバーターが使用可能です。コンバーターはCSSクラス名で表され、<input type="text"> に追加するだけで変換処理が実行されます。

概要

入力された文字列を「全角にする」「ハイフンを除去する」といった変換処理を、CSSクラス追記だけで実装できます。以下は、「全角にする」変換処理を行う例です。(フォームIDが espf の場合)

<label for="address">住所 : </label>
<input type="text" name="address" class="espf-convert-fullwidth" />

このように、入力要素 <input type="text"> に対して [フォームID]-convert-[コンバーター種別] を記述するだけで、ユーザの入力文字列が自動変換されます。

標準コンバーター

以下のコンバーターが標準で用意されています。（フォームIDは espf の場合)

コンバータークラス	処理
`espf-convert-fullwidth`	英数字・記号を全角に変換
`espf-convert-halfwidth`	全角英数字・記号・カタカナを半角文字に変換
`espf-convert-nohyphen`	ハイフン文字（-、ー、－）を除去
`espf-convert-uppercase`	アルファベットを大文字に変換
`espf-convert-lowercase`	アルファベットを小文字に変換
`espf-convert-removespaces`	半角スペース・全角スペースを除去

変換例

各コンバータークラスを追記すると以下のように変換されます。

コンバータークラス	変換前	変換後
`espf-convert-fullwidth`	`abc123`	`ａｂｃ１２３`
`espf-convert-halfwidth`	`ＡＢＣ１２３`	`ABC123`
`espf-convert-nohyphen`	`090-1234-5678`	`09012345678`
`espf-convert-uppercase`	`hello world`	`HELLO WORLD`
`espf-convert-lowercase`	`HELLO WORLD`	`hello world`
`espf-convert-removespaces`	`hello world`	`helloworld`

実装例

以下に標準コンバーターの使用例を示します。(フォームIDは espf)

住所欄の入力を全角に変換する

<label>住所 : </label>
<input type="text" name="address" class="espf-convert-fullwidth" />

電話番号の入力をハイフン除去する

<label>電話番号 : </label>
<input type="text" name="tel" class="espf-convert-nohyphen" />

独自コンバーター

標準コンバーターの自動変換で不足する場合、独自のコンバーターを追加することができます。

以下は、入力文字列をキャピタライズするコンバーター capitalize と、プレフィックス(接頭辞)を付与するコンバーター addPrefis を定義している例です。

var espar_form = {
    espf: {
        ...
    },
    converters: {
        // キャピタライズ化(先頭を大文字にする)
        'capitalize': function(value) {
        return value.replace(/\b\w/g, l => l.toUpperCase());
        },
        // 接頭辞を付与する
        'addPrefix': function(value, param) {
        return param + value;
        }
    }
}

このように、espar_form のグローバル変数直下に、コンバーター名をkeyとして関数をvalueとするオブジェクト列を converters として宣言します。関数名には英数字のみが使えます。全角文字や記号は使用できません。

関数の第一引数には入力値が入ります。第二引数でパラメタを受け取ることおできます。コンバータークラスを表記する際に末尾に(ハイフン区切りで)文字列を追記するとパラメタとして渡されます。関数ないで変換処理を行って結果を return します。

上記例の使用例は以下の通りです。標準コンバーターと同じように使用することができます。

<label>製品コード(自動でキャピタライズされます):</label>
<input type="text" name="code" class="espf-convert-capitalize" />

<label>社員番号(数値のみでokです):</label>
<input type="text" name="manageid" class="espf-convert-addPrefix-FT" />

上記の独自コンバーターを使用すると結果は以下のようになります。(JavaScriptのコードの通りに処理されていることが分かります)

独自コンバータークラス	変換前	変換後
`espf-convert-capitalize`	`hello world`	`Hello World`
`espf-convert-addPrefix-FT`	`123`	`FT123`

コンバーターとバリデータの同時設定

入力要素にコンバーターとバリデーションの両方が設定された場合、評価される順番は、

コンバーター
バリデーション

となります。入力値に対してコンバーターによる自動変換が先に実行され、その変換結果に対しバリデーションによるチェックが行われます。

以下はスペース除去のコンバーター removespaces と文字列長バリデーション length が指定されている例です。

<label>管理番号</label>
<input type="text" name="idnumber" class="espf-convert-removespaces　espf-length-8" />
<div class="espf-e-idnumber-length">管理番号は8文字にして下さい</div>

この例では、スペース除去変換(コンバーター)が先に処理された後、文字列長が8文字であるかのチェック(バリデーション)が行われます。

入力された文字列が 1234 ABC (スペース込みで8文字)の場合、コンバーターによりスペースが除去された結果 1234ABC (7文字)に対して文字列長のチェックが行われます。結果、8文字ではないためにバリデーションエラーとなり、エラー用の文言が表示されることになります。

コンバーターの実行タイミング

確認画面があるフォームの場合、コンバーターは確認画面に遷移しようとする瞬間に発動します。

バリデーションを全て満たして確認画面に遷移する時
バリデーションを満たさない項目が存在し、入力画面のままエラーが表示される時

いずれのケースでもユーザが「勝手に変換された？」と違和感を覚える可能性があります。入力欄の近くに案内文を一文追加しておくと親切です。

案内文の例

コンバータークラス例	案内文
`espf-convert-fullwidth`	`半角/全角のどちらの入力でも結構です。自動的に全角に変換されます。`
`espf-convert-nohyphen`	`自動でハイフン除去されるため、ハイフンありで入力することもできます。`