Class: FormController

h5.ui. FormController

new FormController()

フォーム要素のバリデートを行うコントローラ
Source:

Methods

(static) addOutput(pluginNames)

プラグインの有効化

フォームのバリデート時にバリデート結果を出力するプラグインを有効にします。以下のようなプラグインが用意されています。

プラグイン名 説明
composition フォーム全体バリデート時にバリデート失敗した項目全てについて指定した箇所にメッセージを出力する
style バリデート時にバリデート結果によって要素にクラスを適用する
message バリデート時にバリデート失敗した項目についてメッセージを表示する
baloon バリデート時にバリデート失敗した項目についてバルーンメッセージを表示する
bsBaloon バリデート時にバリデート失敗した項目についてブートストラップでバルーンメッセージを表示する(bootstrap依存)
asyncIndicator 非同期バリデート中の項目についてインジケータを表示する
Parameters:
Name Type Description
pluginNames string | Array.<string> プラグイン名またはその配列
Source:

(static) addRule(ruleObj)

ルールの追加

バリデートルールを追加する。第1引数にはルールオブジェクトを指定します。ルールオブジェクトについてはh5.validation.FormValidationLogic.addRuleと同じ形式で指定してください。

Parameters:
Name Type Description
ruleObj Object ルールオブジェクト(オブジェクトの形式はh5.validation.FormValidationLogic.addRule参照)
Source:

(static) clearValue()

フォーム部品の値をすべてクリアする
Source:

(static) disableRule(names)

ルールの無効化

第1引数に指定されたプロパティについてのバリデートを無効化します

Parameters:
Name Type Description
names string | Array.<string> プロパティ名またはその配列
Source:

(static) enableRule(names)

ルールの有効化

第1引数に指定されたプロパティについてのバリデートを無効化します

Parameters:
Name Type Description
names string | Array.<string> プロパティ名またはその配列
Source:

(static) getOutput(pluginName) → {Controller}

プラグイン名からプラグインインスタンスを取得
Parameters:
Name Type Description
pluginName string プラグイン名
Returns:
Type
Controller
Source:

(static) getValue(names) → {Object}

このコントローラが管理するフォーム内のフォーム部品の値を集約したオブジェクトを生成する

フォーム部品を集約し、各部品の名前(name属性値)をキーに、その値を持つオブジェクトを返します。

第1引数を省略した場合、このコントローラのバインド対象のフォーム内全てのフォーム部品を集約対象とします。

第1引数にtargetNamesを指定した場合、指定した名前に当てはまるフォーム部品だけが集約対象になります。

例えばname属性が"userid"のinputがあり、その値が"0001"である場合は、{userid: "0001"}のようなオブジェクトを返します。

また、グループ指定された要素の集約をすることができます。

グループとは、以下のように指定することができます 


<!-- data-h5-input-group-containerにグループ名を指定。子要素がそのグループになる。 -->
lt;div data-h5-input-group-container="birthday">
		<displayName class="control-displayName">生年月日</displayName>
		<input name="year" type="text" placeholder="年">
		<input name="month" type="text" placeholder="月">
		<input name="day" type="text" placeholder="日">
		</div>

上記のような指定のされた要素は、グループ名をキーにグループに属する要素を集約したオブジェクトとして集約します。戻り値は以下のようになります。 


{
	birthday: {
		year: "1999",
		month: "1",
		month: "2"
	},
	zipcode: {
		zip1: "220",
		zip2: "0012"
	}
}
Parameters:
Name Type Description
names string | Array.<string> 指定した場合、指定したnameのものだけを集約
Returns:
フォーム部品集約オブジェクト
Type
Object
Source:

(static) removeRule(name)

ルールの削除

第1引数に指定されたプロパティについてのバリデートルールを削除します

Parameters:
Name Type Description
name string | Array.<string> プロパティ名またはその配列
Source:

(static) resetValidation()

各プラグインが出力しているバリデート結果表示をすべてリセットする
Source:

(static) setSetting(setting)

フォームコントローラの設定を行う

第1引数にフォームコントローラの設定及び各プラグインの設定を行うオブジェクトを指定します。

各プラグインの機能及びプラグイン名については、h5.ui.FormController.addOutputをご覧ください。

指定する設定オブジェクトには各プラグイン毎の設定と、各プロパティ毎の設定を記述します。 


{
	output: { // 各プラグイン毎の設定
		baloon: { // キー名にプラグイン名
			placement: 'top' // 設定プロパティと値を記述
		},
		message: {...},
		...
	},
	property: { // 各プロパティ毎の設定
		name: { // キー名にプロパティ名
			displayName: '名前', // 設定プロパティと値を記述
			message: '必須です', // 設定プロパティと値を記述
			output: { // 各プロパティについて各プラグイン固有の設定
				baloon: {
					placement: 'left' // 設定プロパティと値を記述
				},
				message: {
					message: '登録には{displayName}が必要です'  // 設定プロパティと値を記述
				}
			}
		}
	}
}

設定プロパティは

  • フォームコントローラで使用するもの
  • 各プラグインで使用するもの
    • プラグイン共通のもの
    • プラグイン固有のもの
があります。

フォームコントローラで使用するもの

設定プロパティ名 型 説明 デフォルト値
isArray boolean あるプロパティについて、値を必ず配列で取ってくる場合はtrueを設定します。isArrayを指定しない場合、name属性値が同じフォーム入力要素が複数あると値が配列になったりならなかったりする場合があります。 例えば、name属性が同じcheckboxが複数チェックされている場合配列になりますが、1つしかチェックされていない場合は文字列になります。 どんな場合でも必ず配列で取得したい場合は、isArrayにtrueを設定してください。 false
srcElement DOM|jQuery|string あるプロパティについて対応する要素を指定します。この指定はフォーム部品ではなくただのdiv等を入力要素としてvalueFuncで値を取ってくるような場合に、エラー出力プラグインが対応する要素を取得するために指定します。 あるプロパティについて対応するフォーム入力部品要素
valueFunc function あるプロパティについて値を取得する関数を指定します。この指定はフォーム部品ではなくただのdiv等を入力要素としたような場合に、値を取得するための関数を設定します。第1引数にはFormControllerのルートエレメント、第1引数にはプロパティ名が渡されます。値を返す関数を設定してください。 なし

全プラグイン共通

設定プロパティ名 型 説明 デフォルト値
off boolean プラグイン無効設定。無効にする場合はtrueを指定。 false

メッセージを表示するプラグイン(message, composition, baloonで共通)

設定プロパティ名 型 説明 デフォルト値
displayName string バリデーション対象のプロパティに対応する表示名 バリデーション対象のプロパティ名。メッセージ生成パラメータ(後述)で使用されます。
message string|function

バリデートエラー時に表示するメッセージ文字列。またはメッセージ生成関数。

文字列で指定する場合はプレースホルダの記述ができます。プレースホルダの場合に適用されるオブジェクト、 及び関数指定の場合に第1引数に渡されるパラメータ(メッセージ生成パラメータ)は共通で、以下の通りです。 


{
    name: 'userid', // プロパティ名
    value: 'ab',     // 値
    displayName: 'ユーザーID', // 設定した表示名。未設定の場合はプロパティ名が入ります。
    violation: [{
      ruleName: 'min',
      ruleValue: {value: 4, inclusive:true},
      reason: (object)  //そのルールが非同期の場合。同期の場合は常にnull
    }, ... ]
}
デフォルトルール毎にデフォルトのメッセージが用意されており、それらが使用されます。

フォーム入力要素基準でエラー表示を行うプラグイン(style,message,baloon,asyncIndicatorで共通)

設定プロパティ名 型 説明 デフォルト値
replaceElement DOM|jQuery|string|function クラス適用対象要素をDOM,jQuery,セレクタの何れかで指定。関数を設定した場合は第1引数にデフォルトは各プロパティのフォーム部品要素が渡され、その関数が返す要素が対象要素になります。 各プロパティのフォーム入力部品要素

各プラグイン固有の設定項目については、各プラグインのJSDocを参照してください。

Parameters:
Name Type Description
setting Object 設定オブジェクト
Source:

(static) setValue(obj)

このコントローラが管理するフォームに対して、値を集約したオブジェクトから値をセットする

各フォーム部品の名前と値を集約したオブジェクトを引数に取り、その値を各フォーム部品にセットします。

Parameters:
Name Type Description
obj Object フォーム部品の値を集約したオブジェクト
Source:

(static) validate(names) → {ValidationResult}

フォームに入力された値のバリデートを行う

第1引数にプロパティ名またはその配列を指定した場合、指定されたプロパティ名のみをバリデート対象にします。省略した場合は全てが対象になります。

Parameters:
Name Type Description
names string | Array.<string> バリデート対象のプロパティ名またはプロパティ名の配列
Returns:
Type
ValidationResult
Source: