---
title: "フォームに独自のバリデーターを追加する"
description: "ceFormValidator の registerValidator で独自の検証ルールを追加し、エラーメッセージを翻訳して表示する方法。JAN コードや半角カナの検証例つき。"
---

> 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.

# フォームに独自のバリデーターを追加する

管理画面のフォームに、独自のバリデーションルールを追加する方法です。たとえば JAN コードの検証、半角カナだけを許可する検証、業務ロジックのチェックなどに使えます。CS-Cart 4.19.1 で確認した内容です。

## ファイルの構成

```text
js/addons/<アドオン名>/func.js                                            # バリデーターのロジック
design/backend/templates/addons/<アドオン名>/hooks/index/scripts.post.tpl # JS の読み込みと翻訳の登録
var/langs/ja/addons/<アドオン名>.po                                       # エラーメッセージの翻訳
```

## 1. JavaScript でバリデーターを登録する

`ce.commoninit` イベントの中で登録します。

```javascript
// js/addons/my_addon/func.js
(function (_, $) {
    'use strict';

    $.ceEvent('on', 'ce.commoninit', function (context) {

        $.ceFormValidator('registerValidator', {
            class_name: 'cm-custom-validator',        // label に付けるクラス名
            message: _.tr('my_addon.validation_error'), // エラーメッセージ（翻訳キー）
            func: function (id) {
                var val = $('#' + id).val();
                if (!val) return true; // 空の場合は検証しない（cm-required と組み合わせられる）
                // 検証のロジック
                return true; // OK: true、NG: false
            }
        });

    });

})(Tygh, Tygh.$);
```

## 2. テンプレートで JS を読み込み、翻訳キーを登録する

```smarty
{* design/backend/templates/addons/my_addon/hooks/index/scripts.post.tpl *}
<script>
    (function(_, $) {
        _.tr({
            "my_addon.validation_error":
                "{__("my_addon.validation_error")|escape:"javascript"}"
        });
    }(Tygh, Tygh.$));
</script>

{script src="js/addons/my_addon/func.js"}
```

## 3. フォームにバリデーターを指定する

> **クラスは label に付ける**
>
> バリデーションのクラスは、`<input>` ではなく `<label>` に付けます。対象の入力欄は、`<label>` の `for` 属性の ID で決まります。

```smarty
<div class="control-group">
    {* label には cm-required（必須）と cm-custom-validator（独自）を両方指定できる *}
    <label class="control-label cm-required cm-custom-validator" for="elm_field_id">
        {__("field_name")}:
    </label>
    <div class="controls">
        <input type="text" name="data[field]" id="elm_field_id" value="" />
    </div>
</div>
```

## 4. 翻訳ファイル

```po
# var/langs/ja/addons/my_addon.po
msgctxt "Languages::my_addon.validation_error"
msgid "Custom validation error message"
msgstr "独自のバリデーションのエラーメッセージ"
```

## 実装例

### JAN コードの検証

13桁の JAN コードを、チェックディジットも含めて検証します。

```javascript
$.ceFormValidator('registerValidator', {
    class_name: 'cm-jan-code',
    message: _.tr('my_addon.validation_jan_invalid'),
    func: function (id) {
        var code = $('#' + id).val();
        if (!code) return true;

        // 13桁の数字であること
        if (!/^\d{13}$/.test(code)) return false;

        // チェックディジットの検証
        var oddSum = 0, evenSum = 0;
        for (var i = 0; i < 12; i++) {
            var digit = parseInt(code.charAt(i), 10);
            if (i % 2 === 0) oddSum += digit;
            else evenSum += digit;
        }
        var total = oddSum + evenSum * 3;
        var expectedCD = (10 - (total % 10)) % 10;
        return parseInt(code.charAt(12), 10) === expectedCD;
    }
});
```

### 半角カナの検証

ASCII の文字と半角カナだけを許可し、全角の文字を拒否する例です。

```javascript
// ASCII と半角カナだけを許可する
function isAsciiOrHalfWidthKatakana(str) {
    for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        // ASCII: 0x00-0x7F、半角カナ: 0xFF61-0xFF9F
        var isValid = (c >= 0x00 && c <= 0x7F) ||
                      (c >= 0xFF61 && c <= 0xFF9F);
        if (!isValid) return false;
    }
    return true;
}

$.ceFormValidator('registerValidator', {
    class_name: 'cm-check-kana',
    message: _.tr('my_addon.validation_kana_only'),
    func: function (id) {
        var val = $('#' + id).val();
        if (!val) return true;
        return isAsciiOrHalfWidthKatakana(val);
    }
});
```

### 複数のフィールドを比較する

内箱の入数が外箱の入数より小さいことを確認する例です。

```javascript
$.ceFormValidator('registerValidator', {
    class_name: 'cm-check-product-pieces',
    message: _.tr('my_addon.validation_innercase_outercase'),
    func: function (id) {
        var innercase = parseInt($('#elm_piece_innercase').val(), 10) || 0;
        var outercase = parseInt($('#elm_piece_outercase').val(), 10) || 0;
        if (innercase === 0 || outercase === 0) return true;
        return innercase < outercase;
    }
});
```

## 標準のバリデーションクラス

`cm-required`、`cm-email`、`cm-phone`、`cm-zipcode`、`cm-integer`、`cm-value-decimal` などがあります。一覧は [マイクロフォーマット](/core/shop-front/microformats/forms/) を参照してください。

## 注意点

> **実装時の注意**
>
> * バリデーションのクラスは、必ず `<label>` に付けます。`<input>` には付けません。
> * `<label>` の `for` 属性で、対象の入力欄の ID を指定します。
> * 空の値は `return true` で検証を飛ばします。必須のチェックは `cm-required` で行います。
> * 翻訳は `_.tr()` で取得します。

JavaScript から翻訳を使う方法（`_.tr()` への登録と `|escape:"javascript"`）の詳しい注意点は、[フォームの送信イベントとバリデーション](/addon-development/tips/form-events-and-validation/) にまとめています。

## 関連ページ

* [マイクロフォーマット](/core/shop-front/microformats/forms/)
* [フォームの送信イベントとバリデーション](/addon-development/tips/form-events-and-validation/)
* [アドオンの言語変数](/addon-development/language-variables-in-addon/)

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