マイクロフォーマット（Microformats）

マイクロフォーマット（Microformats）は、特定のマイクロフォーマット（Microformats）が割り当てられた HTML要素 の指定されたイベントで実行されるべき JavaScript を割り当てるための CSS セレクタです。

CSS は、HTML に記述された指定の範囲または要素に対して装飾を施しますが、CSS によるデザイン指定をどの HTML 要素に適用するのかを指定するのに用いられるのが CSS セレクタです。

マイクロフォーマット（Microformats）には、以下のような命名規則があります。（新しいマイクロフォーマット（Microformats）を定義するときには注意が必要です）：cm-new-microformat-name

プレフィックス：cm-（CS-Cart Microformatの略）は、この CSS スタイルがマイクロフォーマットであることを示します。

標準の CSS スタイルとは異なり、マイクロフォーマット（Microformats）の記述は、CSS ファイルではなく JavaScript ファイルに記述します。

マイクロフォーマット（Microformats）を処理する JavaScript コードを検索するには、 /js/ ディレクトリ内で .hasClass('cm-microformat-name')の文字列を検索する必要があります。

フォーム

入力項目のバリデーションチェック

<label class="cm-email cm-required" for="elm_id">項目名：</label>
<input type="text" name="test" value="Y" id="elm_id" />

パラメータ で検証済みの要素に割り当てられたラベル要素 forは、フォームフィールドのバリデーションに必要です。

入力項目のバリデーション用のマイクロフォーマット（Microformats）は、label要素のクラス属性として定義されており、クラスは複数のバリデーションルールを組み合わせることができます。

ラベルは、たとえ非表示であっても、マイクロフォーマット（Microformats）で説明が必要です。この説明は、誤って入力された入力項目に関するメッセージに使用されるためです。

これらのメッセージの中では、以下のプレースホルダーを使用することができます。

[field]：1つのパラメーターがメッセージ作成の関数に渡される場合、ラベルの説明に置き換えられます。

例

var msg = '[field] は無効です';
this.form_message(msg, lbl);

[field1]、 [field2]：2つのパラメーターがメッセージ作成の関数に渡される場合、メインラベルと追加ラベルの説明に置き換えられます。次に例を示します。

var msg = '[field1] は [field2] と一致しません';
this.form_message(msg, lbl1, lbl2);

[extra] ：メッセージに表示される追加データ

var msg = '入力項目 [field] は形式に設定する必要があります： [extra]';
var extra = '1AB-CF5';
this.form_message(msg, lbl, null, extra);
  • cm-required：要素は必須項目です。チェックボックスが割り当てられている場合、チェックボックスはチェックされます。
  • cm-email：入力された要素の値は、有効なメールアドレスかチェックします。
  • cm-phone：入力された要素の値は有効な電話番号かチェックします。
  • cm-zipcode：入力された要素の値は有効な郵便番号か $.ceFormValidator('setZipcode', {...}))でチェックします。（各国には独自の郵便番号形式があるため、国テーブルでパターンを定義する必要があります）。

例

<script type="text/javascript">
Tygh.$.ceFormValidator('setZipcode', {
 US: {
          regexp: /^(\d{5})(-\d{4})?$/,
         format: '01342 (01342-5678)'
 },
        CA: {
        regexp: /^(\w{3} ?\w{3})$/,
        format: 'K1A OB1 (K1AOB1)'
        },
        RU: {
        regexp: /^(\d{6})?$/,
        format: '123456'
        }
});
</script>
  • cm-value-integer：フォーム要素 (input、textarea など) に割り当てられます。入力された要素の値が整数かどうかをチェックします。
  • cm-value-decimal：フォーム要素 (input、textarea など) に割り当てられます。入力された要素の値が浮動小数点数かどうかをチェックします。
  • cm-integer：入力された要素の値が整数かどうかをチェックします。
  • cm-password：必ず要素のペアに割り当てられ、二つの値は同じかどうかをチェックします。
  • cm-multiple：select要素の少なくとも1つの値が選択されているかどうかをチェックします。
  • cm-all：フォームを送信する前にselect要素のすべてのオプションを選択します。

例

<label for="a" class="cm-custom (check)"><input type="input" id="a" value="" />
<script type="text/javascript">

    function fn_check(id)
    {
        return (1 == 1) ? true : '無効';
    }
</script>

この関数は、検証済み要素の ID という1つのパラメーターのみを受け入れます。

  • cm-regexp：入力された要素の値が正規表現と一致しているかどうかをチェックします。正規表現は、$.ceFormValidator('setRegexp', {})で定義されます。

例

<label for="a" class="cm-regexp"><input type="input" id="a" value="" />

<script type="text/javascript">
Tygh.$.ceFormValidator('setRegexp', {
        'elm_id': {
        regexp: "^[A-Za-z]+$",
        message: "英字のみを使用してください"
        }
};
</script>
  • cm-numeric：jQueryの autoNumeric プラグインを使用して、入力された要素の値が数値かどうかをチェックします。
    プラグインのドキュメント: http://www.decorplanit.com/plugin/

例

<label for="a" class="cm-regexp"><input type="input" id="a" value="" />
<script type="text/javascript">
    regexp['a'] = {regexp: "^[A-Za-z]+$", message: "英字のみを使用してください"};
</script>