LiveValidation

【注意】 LiveValidationのサポート終了に伴い動作保障外となりました。

概要

LiveValidation は入力値検証を行うためのJavaScriptベースのライブラリです。キー入力時の即時検証とフォーム検証を行うことができます。LiveValidationプラグインを使うことにより、XMLで設定ファイルを記述するだけで、マスカットで作成した画面の入力値検証をすることができます。

LiveValidation-demo.png

導入手順

以下の手順で、LiveValidationプラグインを導入できます。

  1. properties.jsonの設定
  2. 画面遷移定義XMLの設定
  3. バリデーション定義XMLの作成

1. properties.jsonの設定

  • properties.json内のlivevalidation を {"enabled": true} に設定します。

記述例

    "livevalidation": {
        "enabled": true,
        "floatMessageMarginTop": 10,
        "floatMessageMarginLeft": 10,
        "floatMessageMarginRight": 20
    }

2.画面遷移定義XMLの設定

  • 画面遷移定義XMLにて、loadLayoutより後にバリデーション定義XMLの読み込みを記述します。

    バリデーション定義XMLの読み込みには、loadValidationタグを使用します。

定義例

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
<transitionDef>
    <init>
        <loadLayout xmlFile="login.xml" target="divMaskat" show="true" />
        <loadValidation xmlFile="login_v.xml" />
    </init>
    <transition component="button" event="onclick">
        <removeLayout layout="login" />
        <loadLayout xmlFile="layout.xml" target="divMaskat"
        <loadValidation xmlFile="layout_v.xml" />
    </transition>
</transitionDef>

3.バリデーション定義XMLの作成

定義例

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
<livevalidation layout="login">
    <component id="loginButton">
        <massValidate eventType="onclick">
            <target ref="userNameText" />
            <target ref="passwordText" />
        </massValidate>
    </component>
    <component id="userNameText">
        <rule name="Validate.Presence">
            <message>ユーザー名を入力してください。</message>
        </rule>
    </component>
    <component id="passwordText">
        <rule name="Validate.Presence">
            <message>パスワードを入力してください</message>
        </rule>
    </component>
</livevalidation>

記述可能なタグ

ログ出力定義 XML で利用可能なタグは以下の通りです。

備考: HTMLのフォーム要素を検証する方法

マスカットレイアウト、部品以外に、HTMLフォームの検証をすることが出来ます。

  1. properties.json内のlivevalidation を { "enabled" : true } に設定します。
  2. HTMLから、maskat.jsを読み込みます。
  3. 画面遷移定義XMLにて、initタグ内でバリデーション定義XMLの読み込みを記述します。
  4. バリデーション定義XML内にて、componentタグの代わりにelementタグで、検証対象を 設定します。

バリデーション定義XML記述例

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
<livevalidation>
    <element id="loginButton">
        <massValidate eventType="onclick">
            <target ref="userNameText" />
            <target ref="passwordText" />
        </massValidate>
    </element>
    <element id="userNameText">
        <rule name="Validate.Presence">
            <message>ユーザー名を入力してください。</message>
        </rule>
    </element>
    <element id="passwordText">
        <rule name="Validate.Presence">
            <message>パスワードを入力してください</message>
        </rule>
    </element>
</livevalidation>