EC厨房プログラマーブログ EC-CUBEやWordPressをわかりやすく紹介

【EC-CUBEカスタマイズ】フォームエラー処理をjQuery Validationでノンストレスに

画面遷移無しでフォームのエラーチェックをする方法をご紹介しましょう。
jQueryプラグインの「Validation」を使うことで簡単に実現できます。

下記サイトのDownloadリンクからダウンロードしてください。
bassistance.de >> jQuery plugin: Validation
jQuery Validationのデモ

こちらのサイトで日本語用エラーメッセージファイルをダウンロードしてください。
真ん中辺りの「messages_ja.js」です。
jQueryでフォームの入力チェックする、jquery.validate.js とエラーの日本語化

通常の使い方ならば上記のサイトを参考にしてもらえれば大丈夫です。
下記ではEC-CUBEの商品コメントフォームにjQuery Validation機能を付け加えてみたいと思います。

Validationのセット

ダウンロードしたValidateionのフォルダの中から下記ファイルを探してください。

• jquery.js（EC-CUBE付属のものより新しい1.2.6です）
• jquery.form.js
• jquery.validate.js

上記3ファイル＋messages_ja.jsを下記ディレクトリに入れます。
/html/user_data/packages/default/js/

テンプレートを修正

EC-CUBEのテンプレートを修正します。
今回適応するのは商品詳細コメントのフォームですのでパスは以下の通りとなります。
/data/Smarty/templates/[テンプレート名]/products/review.tpl

form要素にIDを追加

<form id="form-post" name="form1" method="post" action="<!--{$smarty.server.PHP_SELF|escape}-->">

93行目あたりに下記コードを追加

<!-- ここから -->
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.form.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/jquery.validate.pack.js">
<script type="text/javascript" src="<!--{$TPL_DIR}-->js/messages_ja.js">

<!-- ここまで -->
<!--{include file="`$smarty.const.TEMPLATE_DIR`popup_footer.tpl"}-->

各フォームのclassに、指定したい条件を入れます。
例えば「投稿者名」は必須入力なので、requiredクラスをinput要素に加えます。
ホームページアドレスの必須項目ならば、urlクラスを追加すればOKです。
最大文字数を指定したければ、maxlengthに値を入れてください。

これで完了です。
サンプルサイトにてデモがあります。お試しください。

なぜAjax的なフォームチェックが必要か

フロント側でバリデーションチェックを行うからといって、バック側を外すわけではなく、実装的には二度手間かもしれません。
しかし、実際に使ってもらえれば解りますが、とてもユーザーフレンドリーなフォームになります。

ECサイトはフォームの打つ量多いので、出来るだけユーザーのストレスを軽減できる仕組みを採用する必要があり、そのためにAjax的なUI（ユーザーインターフェイス）が必要になってくるのです。

詳しいドキュメントはこちら。