Dijitのテキストエリアは、入力した内容に従って高さが自動で変化すると言う点で通常のテキストエリアとは異なる。このことからテキストエリアの高さは可変であり、row属性は無視される。また、テキストエリアの幅はcol属性を用いずCSSで指定する。

  dojo.require("dijit.form.Textarea");

  <textarea name="textarea"
            dojoType="dijit.form.Textarea"
            style="width: 300px"></textarea>

dijit.form.ValidationTextBox

ValidationTextBoxは、入力値の検証が可能なテキストボックスだ。キー入力が行われるごとに指定された正規表現に従って値を検証し、値が不正な場合はメッセージを表示する。

    <!-- regexp属性を用いて正規表現を指定する -->
    <div dojoType="dijit.form.ValidationTextBox" regexp="\d{3}">
    </div>

また、isValid()と言うメソッドをオーバーライドしてBoolean値を返すことで、自作の関数を用いた検証を行うこともできる。以下は、「偶数以外の入力値をエラーとする」テキストボックス。

    <div dojoType="dijit.form.ValidationTextBox">
      <script type="dojo/method" event="isValid">
        var value = dojo.trim(this.textbox.value);
        if (value == "") {
          return true;
        }
        var n = parseInt(value, 10);
        if (n == NaN) {
          return false;
        }
        return n % 2 == 0;
      </script>
    </div>

dijit.form.Formの使い方

dijit.form.Formウィジェットは、通常のformタグと同じように使用するが、いくつかの点で動作が異なる。

自動サブミットを行わない

dijit.form.Formウィジェットは、通常のformタグが行うような自動サブミットを行わない。フォーム内部で送信ボタンが押された場合は、かわりにonExecute()イベントが発生する。

サブミットを行う場合は、同ウィジェットのsubmit()メソッドを明示的に呼び出す必要がある。

    <!-- submit()を用いてサーバーに送信 -->
    <div dojoType="dijit.form.Form" action="test.php" onExecute="this.submit()">
      <div dojoType="dijit.form.Button" type="submit">
        送信ボタン
      </div>
    </div>

値の検証を行える

フォーム内に配置された、値の検証可能なウィジェット (ValidationTextBoxなど) が、全て検証OKかどうかを簡単に調べるメソッドisValid()が用意されている。通常はこのメソッドによって値の入力チェックを行い、すべてOKの場合にのみ送信する、という処理の流れになる。

<!-- submit()を用いてサーバーに送信 -->
<div dojoType="dijit.form.Form" action="test.php">
  <script type="dojo/method" event="onExecute">
    // すべて検証OKの場合のみ送信
    if (this.isValid()) {
      this.submit();
    }
  </script>
  <div name="num" dojoType="dijit.form.ValidationTextBox" regexp="\d{3}">
  </div>
  <div dojoType="dijit.form.Button" type="submit">
    送信ボタン
  </div>
</div>

フォーム内部の入力値をまとめて取得可能

getValues()メソッドを呼び出すと、フォーム内にあるウィジェット (name属性が付いている物のみ) に入力された値を、JavaScriptオブジェクトとして簡単に取得可能。オブジェクトの属性名はウィジェットのname属性、属性値は入力された値。このように、非常に簡単に入力値をまとめて取得できるので、Ajaxリクエストを行う際などに重宝する。