{"_id":"554c3cf11f5dd20d008a7b36","__v":0,"tags":[],"user":{"_id":"551952063414b40d00e470cb","username":"","name":"Toshihiro Yoshiura"},"initVersion":{"_id":"5544d76ad8833c0d00582801","version":"4.0"},"project":"55227389b4a0de0d00de7e28","createdAt":"2015-05-08T04:34:57.975Z","changelog":[],"body":"[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"CS-Cartの管理パネルで独自のバリデータを定義する方法\"\n}\n[/block]\nCS-Cartにはあらかじめ基本的なフォームバリデータが用意されています。  \n[マイクロフォーマットを参照](http://docs.cs-cart.jp/v4.0/docs/microformats)\n\nしかしながら、独自のバリデーションを作成したいという場面は数多くあります。\nそこで、オリジナルのバリデーションの実装方法を解説いたします。\n\n例)入力された値が5文字以内であるかチェックする。\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<script type=\\\"text/javascript\\\">\\n//<![CDATA[\\n \\n//独自バリデータを実装する\\n//最大文字数5かどうかチェックする\\nTygh.$.ceFormValidator('registerValidator', {\\n    class_name: 'cm-check-max5',\\n    message: '{__(\\\"check_over_max5\\\")|escape:javascript}',\\n    func: function(id) {\\n        if($('#' + id).val().length > 6){\\n            return false;\\n        }else{\\n            return true;\\n        }\\n    }\\n});\\n//]]>\\n</script>\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n名称:**cm-**check-max5 (cm-に続けてバリデーション名を付けます)  \nこの名称はテンプレートで使用するクラス名となります。\n作成する関数はtrue / falseを返すように設定します。\n\n\nテンプレートでの使用方法は以下のようなものになります。\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<!-- 5文字以内かどうか -->\\n<div class=\\\"control-group cm-no-hide-input\\\">\\n    <label for=\\\"product_max5\\\" class=\\\"control-label cm-required cm-check-max5\\\">{__(\\\"product_max5_title\\\")}</label>\\n    <div class=\\\"controls\\\">\\n        <input id=\\\"product_max5\\\" class=\\\"input-long\\\" type=\\\"text\\\" name=\\\"product_data[product_max5h]\\\" size=\\\"55\\\" value=\\\"{$product_data.product_max5h}\\\" />\\n    </div>\\n</div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\nこの例では、入力必須(`cm-required`)と独自に作成した5文字内(`cm-check-max5`)というバリデーションが有効になります。エラーメッセージは、Javascript内で言語変数を指定して言語ファイルを準備します。\n\nこれらのファイルをダウンロード:\nhttps://gist.github.com/cscartjp/77996768a2c4c8865af7","slug":"original-validator","title":"Original Validator - 独自のバリデータを定義する"}

Original Validator - 独自のバリデータを定義する


[block:api-header] { "type": "basic", "title": "CS-Cartの管理パネルで独自のバリデータを定義する方法" } [/block] CS-Cartにはあらかじめ基本的なフォームバリデータが用意されています。 [マイクロフォーマットを参照](http://docs.cs-cart.jp/v4.0/docs/microformats) しかしながら、独自のバリデーションを作成したいという場面は数多くあります。 そこで、オリジナルのバリデーションの実装方法を解説いたします。 例)入力された値が5文字以内であるかチェックする。 [block:code] { "codes": [ { "code": "<script type=\"text/javascript\">\n//<![CDATA[\n \n//独自バリデータを実装する\n//最大文字数5かどうかチェックする\nTygh.$.ceFormValidator('registerValidator', {\n class_name: 'cm-check-max5',\n message: '{__(\"check_over_max5\")|escape:javascript}',\n func: function(id) {\n if($('#' + id).val().length > 6){\n return false;\n }else{\n return true;\n }\n }\n});\n//]]>\n</script>", "language": "javascript" } ] } [/block] 名称:**cm-**check-max5 (cm-に続けてバリデーション名を付けます) この名称はテンプレートで使用するクラス名となります。 作成する関数はtrue / falseを返すように設定します。 テンプレートでの使用方法は以下のようなものになります。 [block:code] { "codes": [ { "code": "<!-- 5文字以内かどうか -->\n<div class=\"control-group cm-no-hide-input\">\n <label for=\"product_max5\" class=\"control-label cm-required cm-check-max5\">{__(\"product_max5_title\")}</label>\n <div class=\"controls\">\n <input id=\"product_max5\" class=\"input-long\" type=\"text\" name=\"product_data[product_max5h]\" size=\"55\" value=\"{$product_data.product_max5h}\" />\n </div>\n</div>", "language": "html" } ] } [/block] この例では、入力必須(`cm-required`)と独自に作成した5文字内(`cm-check-max5`)というバリデーションが有効になります。エラーメッセージは、Javascript内で言語変数を指定して言語ファイルを準備します。 これらのファイルをダウンロード: https://gist.github.com/cscartjp/77996768a2c4c8865af7