---
title: "フォームのクラスに関する注意点"
description: "cm-processed-form を付けるとバリデーションが動かない問題と、cm-hide-inputs で入力欄を表示専用にする方法。"
---

> Documentation Index
> Fetch the complete documentation index at: https://docs.cs-cart.jp/llms.txt
> Use this file to discover all available pages before exploring further.

# フォームのクラスに関する注意点

フォームに付けるクラスのうち、間違いやすいものをまとめます。クラスの一覧は [マイクロフォーマット](/core/shop-front/microformats/forms/) を参照してください。

## `cm-processed-form` を付けない

> **標準のバリデーションが動かなくなります**
>
> `cm-processed-form` をフォームに付けると、`cm-required` などの標準のバリデーションが動かなくなります。

### 症状

```html
<!-- バリデーションが動かない -->
<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` を取り除きます。

```html
<!-- バリデーションが正しく動く -->
<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>
```

### このクラスについて

* 公式ドキュメントの [マイクロフォーマット](https://docs.cs-cart.com/latest/developer_guide/core/front-end/microformats.html) には、記載がありません。内部で使われるクラスと考えられます。
* フォームを「処理済み」として印を付けるクラスで、付けるとバリデーションが飛ばされることを確認しています。

### フォームの書き方の例

バリデーションが必要な通常のフォームは、`cm-processed-form` を付けずに書きます。

```html
<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` を付けます。

```html
<form action="..." method="post" name="form_name" class="cm-ajax">
    <!-- フォームの内容 -->
</form>
```

バリデーションを通過した後に処理を足したい場合は、`ce.formpost_[FORM_NAME]` イベントを使います。詳しくは [フォームの送信イベントとバリデーション](/addon-development/tips/form-events-and-validation/) を参照してください。

## `cm-hide-inputs` で入力欄を表示専用にする

フォームの入力欄を、表示専用（読み取り専用）にしたい場合の、CS-Cart 標準の書き方です。`cm-hide-inputs` クラスを `control-group` に付けます。

```smarty
<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>
```

> **input タグを使う**
>
> 入力欄は、`<input>` の要素をそのまま使います。`<span class="uneditable-input">` にはしません。`cm-hide-inputs` が JavaScript で入力欄を非表示にし、値だけを表示します。

### 条件付きで適用する

たとえば、ベンダーパネルでだけ読み取り専用にする場合です。

```smarty
<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 が入力欄を自動で非表示にし、値だけをテキストとして表示します。フォームの送信時には、値が正しく送られます。

## 関連ページ

* [マイクロフォーマット](/core/shop-front/microformats/forms/)
* [フォームの送信イベントとバリデーション](/addon-development/tips/form-events-and-validation/)
* [フォームに独自のバリデーターを追加する](/addon-development/tips/custom-form-validator/)

Source: https://docs.cs-cart.jp/addon-development/tips/form-classes/index.mdx