本文へスキップ
CS-Cart 開発者ドキュメント

フォーム

更新日: Markdown で表示

フォーム

フィールドの検証

使用法:

<label class="cm-email cm-required" for="elm_id">Field name:</label>
<input type="text" name="test" value="Y" id="elm_id" />

パラメーターにより確認された要素に割り当てられたラベル要素のforは、フォームフィールドのバリデーションで必要となります。

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

間違って入力されたフィールド用にエラーメッセージを使用できるようにするために、ラベルが非表示の場合であってもマイクロフォーマットの記述が必要です。

これらのエラーメッセージでは、以下のプレースホルダーを使用することが出来ます：

form_message(msg, lbl, null, extra)

** [field]** パラメーターが一つエラーメッセージ作成の関数（form_message()）に渡されると、ラベルの説明文に置き換えられます。
例えば：

var msg = 'The field [field] is not valid';
this.form_message(msg, lbl);

パラメーターは、2つまでエラーメッセージ作成関数に渡すことが出来ます。

例:

var msg = 'The field [field1] do not match field [field2]';
this.form_message(msg, lbl1, lbl2);

[extra] エラーメッセージに表示される追加のデータを指定します。

var msg = 'The field [field] should be set to the following format: [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要素の少なくとも１つの値が選択されているかどうかを検証します。
  • cm-all - フォームを送信する前に要素のすべてのオプションを選択します。

独自の検証パターンを定義することも出来ます。

例:

<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 : 'Not valid';
    }
</script>

このファンクションは対象のIDのみをパラメーターとして受け取ります。

  • cm-regexp - 正規表現で書かれたフォーマットに正しいかを検証します。 正規表現は$.ceFormValidator('setRegexp', {})で定義されます。

例:

<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 : 'Not valid';
    }
</script>
  • cm-numeric - checks whether the value is a number with the help of autoNumeriс plugin.
    jQueryの「autoNumeriс」プラグインを使って、値が数字かどうかを検証します。

autoNumeriсプラグインのドキュメント

例:

<label for="a" class="cm-regexp"><input type="input" id="a" value="" />
<script type="text/javascript">
    regexp['a'] = {regexp: "^[A-Za-z]+$", message: "Please, use only alphabetical signs"};
</script>

フォーム処理

<form class="cm-ajax">
    ...
</form>

マイクロフォーマットはformタグのCSSクラスとして使用されます。
クラスは組み合わせることができます。

  • cm-ajax - このフォームはAJAXを使って送信されます。 このフォームにはresult_idsというhidden要素が自動で追加されます。
<input type="hidden" name="result_ids" value="id1, id2" />
  • cm-ajax-full-render - cm-ajaxと一緒でのみ使用できます。ページ全体を強制的にリロードします。
  • cm-no-ajax - フォームの送信ボタンにこのクラスが割り当てられている場合、ボタンをクリックした際には、cm-ajaxクラスがフォームにある場合でも、フォームは通常の方法（GET/POST）で送信されます。このイベントはAJAXでformが送信される前後で使用します。これを宣言するには以下のルールを使用してください：
  • Pre-call: 'ce.formpre_[FORM_NAME]', [form, clicked_elm]`.
  • Callback: 'ce.formpost_[FORM_NAME]', [form, clicked_elm]`.
  • form - 送信されるフォームオブジェクト
  • clicked_elm - 強制的に送信されるフォームオブジェクト
  • [FORM_NAME] - 送信されるフォーム名

例:

$.ceEvent('on', 'ce.formpre_add_to_cart_form', function(form, elm) {
  // Some code here
});
  • cm-check-changes - フォームを送信する前に保存されていない変更があるかチェックします。 もし保存されていない変更箇所があれば、警告が表示されます。これは、管理パネル内の全てのPOSTメソッドのフォームにデフォルトで割り当てられています。
if (_.area == 'A') {
   frms.filter('[method=post]').addClass('cm-check-changes');
  • cm-disable-empty - フォームに割り当てられます。空のフィールドは送信されません。例えば、商品検索フォームにおいて未指定のパラメーターの送信をキャンセルします。
  • cm-disable-empty-files - フォームに割り当てられます。空のファイル送信フィールドを送信しません。
  • cm-failed-field - フォームが送信され後、間違って入力されたエラーのあるデータを強調するために自動的にフォームフィールドに割り当てられます。
  • cm-no-hide-input - フォームにcm-disable-emptyクラスが指定されていても、空の値を送信することができます。
  • cm-trim - label要素に割り当てられます。バリデーションチェックする際に、入力の値から前後のスペースを削除します。

フォームのリセット

  • cm-reset-link - このクラスで要素をクリックする際に、フォームの値がデフォルト値に設定されます。 商品検索フォームで使用されます。

フォームフィールドの選択

  • cm-select-text - クリックされた際にこのクラスをもつ要素は、ハイライト表示されます。 (textarea, input要素) バッファリング用のコピーを簡単にします。

フォームのリロード

  • cm-reload-form – form要素に割り当てられます。このフォームが変更された際、GETリクエストを使用してリロードされます。

フォーム内のピッカー

  • cm-ajax-content-input - 例えば、ピッカー内で検索リクエストを行う際に自動補完を可能にします。自動補完用のAJAXリクエストは入力が停止した後、500ミリ秒遅れて送信されます。受信したコンテンツ（AJAX）はREV属性に書かれているコンテナにロードされます。自動補完のパターンはvalueパラメータから取得されます。　

例: マーケットプレイス版でピッカーを使って出品者を選択する

　　　　　

  • cm-ajax-content-more - 非表示となっている要素が見えるようになる時に（例えば多数のオプションを持つドロップダウンリスト）、追加のコンテンツがロードされます。

　　　　　

例: マーケットプレイス版で多数の出品者をピッカー内で選択する場合

  • cm-cancel - このマイクロフォーマットを持つボタンがクリックされた時、全てのピッカーフィールドはデフォルト値が設定されます。
  • cm-clone - ピッカーを閉じることなくピッカー内にアイテムを追加する際に使用します。（AJAXリクエストなしで）

例: 「キャンペーン」を管理するページでピッカー内に複数の商品やカテゴリー追加する際に空の要素に複製されたアイテムを追加します。

  • cm-dialog-opener - このマイクロフォーマットは、ダイアログを開かせたい要素（「カテゴリーを開く」等）に割り当てられます。ダイアログの中身はREVパラメータで定義します。

  • cm-dialog-closer- すでに開いているダイアログを閉じさせる要素に割り当てます。
    例: ピッカー内の「キャンセル」ボタン

  • cm-dialog-keep-in-place - ※まだ実装されていません。

  • cm-dialog-auto-open - ページを訪れた際にこのクラスが適用されたダイアログボックスは自動でオープンします。
    例：管理パネルに初回にアクセスした場合に自動で開かれる設定ウィザードなどで使用されています。

  • cm-dialog-auto-size - このマイクロフォーマットは、cm-dialog-openerクラスと共に使用します。このクラスが使用されている場合、ダイアログボックスの幅と高さはコンテンツに自動調整されます。

  • cm-dialog-auto-width - cm-dialog-openerと共に使用します。ダイアログボックスの幅はコンテンツに自動調整されます。

  • \

  • cm-dialog-switch-avail - ダイアログボックス内で選択した全てのチェックボックスを選択解除します。

  • cm-js-item - このクラスは、ピッカーからフォームに要素を追加する際（例：ギフト券への追加）、追加された要素が属するコンテナに割り当てられます。

  • cm-picker-options - 商品オプションがピッカーからの商品に適用された際に適用されます。

[block:html] { “html”: “<tbody id=”{$data_id}” class=“{if !$item_ids}hidden{/if} cm-picker-options”>” } [/block]

input[type=submit]要素以外をクリックしてフォームを送信する方法

使用法:

<input type="radio" name="a" value="b" class="cm-submit" />

マイクロフォーマットは要素のCSSクラスとして定義されます。クラスは組み合わせることができます。

  • cm-submit - この要素が割り当てられたform要素は、その要素がクリックされた後に送信されます。

例：ボタン以外の要素のクリックでフォームを送信するためには：

  1. cm-sumbitを要素に割り当てる
  2. data-ca-dispatch属性でフォームが送信されるデdispatch（[controller.mode）を指定します。

※送信する要素がフォームの外にある場合のみ、data-ca-target-form属性で名前やIDを返します。

新しいウィンドウや親ウィンドウでフォームを送信する

例:

<input type="submit" name="a" value="b" class="cm-new-window" />
<input type="submit" name="a" value="b" class="cm-parent-window" />
  • cm-new-window - クリックされた際に新規のウィンドウが開きフォーム内容がそこに送信されます。
  • cm-parent-window - クリックされた際にフォームの内容は親ウィンドウに送られます。

フォームの送信を禁止する

使用方法:

<input type="submit" name="a" value="b" class="cm-no-submit" />
  • cm-no-submit - この要素が割り当てられているフォームは、submit要素がクリックされても送信されません。

フォームバリデーションをスキップする

使用方法:

<input type="submit" name="a" value="b" class="cm-skip-validation" />
  • cm-skip-validation - submit要素をクリックすると、この要素の適用されたフォームはバリデーションを行うことなく送信されます。

フォームを隠す

  • cm-hide-inputs - このクラスが適用されたinput要素の値はplain textで表示されます。（編集はできません）　　　　　　　　
    例: マーケットプレイス版CS-Cartで出品者に表示は行うが編集できない項目など
  • cm-hide-save-button - このクラスが割り当てられているボタンは非表示になります。（ボタンの保存は必須ではありません）

フォーム内のチェックボックス

利用方法:

<input type="checkbox" name="check_all" value="Y" class="cm-check-items" />
...
<input type="checkbox" name="product_ids[]l" value="1" class="cm-item" />
<input type="checkbox" name="product_ids[]l" value="2" class="cm-item" />

<a href="#" name="check_all" class="cm-check-items on">Check all</a>/<a href="#" name="check_all" class="cm-check-items off">Uncheck all</a>

上記の例では二種類の異なるチェックボックスをコントロールする要素があります。

  • 通常のチェックボックス
    -リンクのチェックボックス

コントロール要素にはcheck_allとクラスとcheck-itemsクラスがなければならりません。

コントロール要素がリンクの場合、クラスのonとoffも決められています。（全てのチェックボックスをコントロールする）

チェックボックスを管理できる要素には、classを持っていなければなりません。
process-itemsクラスは、フォームを送信するボタンに割り当てられます。

ボタンがクリックされた際にチェックボックスが対応するグループは、チェックボックスがonかoffを調べます。

いずれのチェックボックスもonでない場合は、メッセージが表示されます。

<input type="checkbox" name="check_all" value="Y" class="cm-check-items-group" />
...
<input type="checkbox" name="product_ids[]l" value="1" class="cm-item-group" />
ナビゲーション

検索語を入力してください…

↑↓ 移動↵ 開くEsc 閉じる