Entersquare Inc. ホームページ作成の株式会社エンタースクウェア

【CS Cart】正規表現を使って独自のバリデーションを入れる

【CS Cart】正規表現を使って独自のバリデーションを入れる

登録フォームにて、

正規表現を使って独自のバリデーションを追加する事が可能です。

labelのclassにcm-reqexpを追加する

CS Cartではマイクロフォーマットとして、特別なCSSセレクタがあります。

プレフィックスは、cm- (CS-Cart Microformatの略)となり、このCSSスタイルがマイクロフォーマットであることを示します。http://docs.cs-cart.jp/v4.0/docs/microformats

今回は正規表現を使いたいので、

cm-regexpというクラスを使います。

<label for="example" class="cm-regexp">
<input type="text" id="example" value="" />

検証する正規表現を定義する

続いて、値を検証する正規表現を定義していきます。

<label for="example" class="cm-regexp" data-ca-regexp="{literal}^([0-9]+)${/literal}">
<input type="text" id="example" value="" />

labelにdata属性のdata-ca-regexp=””を追加し、

{liternl}{/literal}で囲った中に正規表現を入れます。

エラーメッセージを定義する

同じくlabelにdata-ca-massage=””を追加し、

エラーメッセージを入れておきます。

<label for="example" class="cm-regexp" data-ca-regexp="{literal}^([0-9]+)${/literal}" data-ca-message="{__("error_validator_example")}">
<input type="text" id="example" value="" />

これで完成です。

最後に

emailを検証したり、電話番号を検証したりするには

cm-emailやcm-phoneをlabelのクラスに追加するだけでもOKです。

ただ検証ルールを厳しくしたりするには、

このcm-regexpを使って正規表現で指定する方が理想的なバリデーションを作る事ができそうです。

参考:http://docs.cs-cart.jp/v4.0/docs/microformats

Solutions

ソリューション

ホームページ作成

Webサイト制作・運用保守

コーポレートサイト/サービスサイト/オウンドメディアサイト/LP/EC

ウェブマーケティングの技術を使ってホームページの作成や保守を承っております。

Webのお悩み

Webのご相談・サポート

運用のお困りごと/集客のお困りごと/運用担当が居なくなったなど

Webに関するお困りごとや、お悩みなどのご相談、サポートを承っております。

その他、アクセス解析、広告運用、SNSサポートなどWebに関する事全般承っております。

詳しく見る