フォームに付けるクラスのうち、間違いやすいものをまとめます。クラスの一覧は マイクロフォーマット を参照してください。
cm-processed-form を付けない
症状
<!-- バリデーションが動かない -->
<form action="..." method="post" name="form_name" class="custom-form cm-processed-form">
<div class="ty-control-group">
<label for="field_id" class="ty-control-label cm-required">
必須のフィールド
</label>
<input type="text" id="field_id" name="field_name" class="ty-input-text" />
</div>
</form>対処
cm-processed-form を取り除きます。
<!-- バリデーションが正しく動く -->
<form action="..." method="post" name="form_name" class="custom-form">
<div class="ty-control-group">
<label for="field_id" class="ty-control-label cm-required">
必須のフィールド
</label>
<input type="text" id="field_id" name="field_name" class="ty-input-text" />
</div>
</form>このクラスについて
- 公式ドキュメントの マイクロフォーマット には、記載がありません。内部で使われるクラスと考えられます。
- フォームを「処理済み」として印を付けるクラスで、付けるとバリデーションが飛ばされることを確認しています。
フォームの書き方の例
バリデーションが必要な通常のフォームは、cm-processed-form を付けずに書きます。
<form action="..." method="post" name="form_name">
<div class="ty-control-group">
<label for="field_id" class="ty-control-label cm-required">
フィールド名
</label>
<input type="text" id="field_id" name="field_name" class="ty-input-text" />
</div>
</form>AJAX で送信するフォームは、cm-ajax を付けます。
<form action="..." method="post" name="form_name" class="cm-ajax">
<!-- フォームの内容 -->
</form>バリデーションを通過した後に処理を足したい場合は、ce.formpost_[FORM_NAME] イベントを使います。詳しくは フォームの送信イベントとバリデーション を参照してください。
cm-hide-inputs で入力欄を表示専用にする
フォームの入力欄を、表示専用（読み取り専用）にしたい場合の、CS-Cart 標準の書き方です。cm-hide-inputs クラスを control-group に付けます。
<div class="control-group cm-hide-inputs">
<label class="control-label">{__("label")}:</label>
<div class="controls">
<input type="text" name="data[field]" value="{$data.field}" class="input-medium" />
</div>
</div>条件付きで適用する
たとえば、ベンダーパネルでだけ読み取り専用にする場合です。
<div class="control-group {if $runtime.company_id}cm-hide-inputs{/if}">
<label for="elm_field" class="control-label">{__("label")}:</label>
<div class="controls">
<input type="text" id="elm_field" name="data[field]" value="{$data.field}" />
</div>
</div>span ではなく input を使う理由
| 方法 | フォームの送信 | 見た目 |
|---|---|---|
<span class="uneditable-input"> |
データが送られない | 読み取り専用のように見える |
<input> と cm-hide-inputs |
データが送られる | 読み取り専用のように見える |
cm-hide-inputs を使うと、JavaScript が入力欄を自動で非表示にし、値だけをテキストとして表示します。フォームの送信時には、値が正しく送られます。