入力項目をその場でチェック jQuery-Validation-Engine
スポンサーリンク
（2014/4/24更新）手順4番の、class属性付与の手順を大幅に見直しました！
WelcartのECサイトのカゴ落ち対策で、住所などのお客様情報の入力時に、リアルタイムで入力内容をチェックするjQueryを導入。
デフォルトのエラー表示では「次へ」のボタンを押してからエラーが出るので、レジに並んでお財布を出しかけたお客様の気を削ぎます。
苦労の末、リアルタイムでのエラー表示をWelcartにも実装出来ました。
使ったのはjQuery-Validation-Engineというプラグインです。「プラグイン」と言っても、WordPressの画面からダウンロード出来るプラグインとは違い、自分でダウンロードした.jsファイルを使用中のテーマに設置して使います。
jQueryはこういった表示などに便利なプラグインが多く出ていますが、WordPress+Welcartで使う場合は、ややコツが要ります（お陰で、勉強するハメに・・・）。
カスタマイズの手順
※クリックで各解説ポイントまでジャンプします。
Welcartで住所入力がある場面は、「新規メンバー登録」「メンバーページ」及び、カート内の「お客様情報」「発送・支払い方法」の４つです。
jQuery-Validation-Engineは、入力部分のclass名をプログラムにより判断して、そのclass名と一致するものだけに、リアルタイムチェックを行う仕組みになっています。ですので、それらのページに含まれる入力部分を表示する<input>要素や<select>要素にclass名を追加する必要があります。
1. jQuery-Validation-Engineをダウンロード、必要なファイルをテーマ内に移す
まずは、jQuery-Validation-Engineの配布サイトから、最新版のzipファイルをダウンロード。
ダウンロードしたzipファイルを解凍すると、たくさんのファイルが入っていますが、そのうち使うのは、
- /js/jquery.validationEngine.js （jQuery-validation-Engine本体）
- /js/languages/jquery.validationEngine-ja.js （日本語ファイル）
- /css/validationEngine.jquery.css （スタイルシート）
の３つです。
これらのファイルをコピーして、使用中のテーマフォルダに置きます。置き場所は自由ですが、以下の例では、テーマフォルダ内のjsフォルダに上の２つを、cssフォルダに一番下のスタイルシートを設置しました。
※ファイルの設置場所をこの記事の例と違う場所にした場合は、下記２のfunctions.phpの記述でこれらのファイルの読み込みurlを指定しますので、その部分を変更下さい。
WordPressでは標準でjQueryがインストールされており、下記２でfunctions.phpに追加するwp_enqueue_script( 'jQuery' )で自動的に適切なjQueryを読み込むようにしますので、同梱されているjquery-1.8.2.min.jsは設置しなくても大丈夫です。
2. functions.php内に、jQueryの読み込みの記述をする
WordPressでは、<head>要素内に直接jQueryの読み込み（<script>～）の記述をする代わりに、functions.phpにjQueryの出力を指定するコードを書き込みます。
add_action( 'wp_enqueue_scripts', 'myScript' );
function myScript() {
wp_enqueue_script('jquery');
if(is_page(array('usces-cart','usces-member')){
wp_enqueue_style( 'validationEngine.jquery.css',
get_template_directory_uri() . '/css/validationEngine.jquery.css', array(), '1.0', 'all');
wp_enqueue_script( 'jquery.validationEngine.js',
get_template_directory_uri() . '/js/jquery.validationEngine.js', array('jquery'), '2.6.2', true);
wp_enqueue_script( 'jquery.validationEngine-ja.js',
get_template_directory_uri() . '/js/jquery.validationEngine-ja.js', array('jquery'), '2.0', true);
}
}
WordPressでは、直接<head>内にスクリプトを記述すると、プラグインなどが吐き出すスクリプトと重複（コンフリクト）し、jQueryがうまく動かない原因になったりします。そこで、jQueryを使う場合には、functions.phpに上記のように書くと、WordPressが自動的に最適化したスクリプトを出力してくれます。
WordPress上でのjQueryの動かし方については、下記サイトが参考になりました。
- WordPressでjQueryを使うときに、問題なく動作させる為の基礎知識やTipsと、動かない場合の対処例（kachibito.net)
- WordPressでjQueryが動かないという人へ（Web Design Recipies）
3. <head>要素内に、フォームチェックをさせる命令を書く
次に、フォーム上でリアルタイムチェックを表示させるために、<head>要素内に以下のコードを書きます。
<?php if(is_page( array('usces-cart', 'usces-member' ))): ?>
<script type="text/javascript">
jQuery(function(){
jQuery("form").validationEngine();
});
</script>
<?php endif; ?>
オリジナルから変更したのは以下の2点。
- カートページとメンバーページにのみフォームチェックを行うコードを入れる条件をつけた。
- 4行目の("form")は、もともとは("#formID")だったが、カスタマイズを簡略化するために変更。
しかしこれだけですと「戻る」ボタンを押した時にもリアルタイムチェックが動いてしまい戻れなくなってしまいますので、「戻る」ボタンをクリックした時は作動しないようにコードを追加します。
※こちらの掲示板（英語）を参考。
<?php if(is_page( array('usces-cart', 'usces-member' ))): ?>
<script type="text/javascript">
jQuery(function(){
jQuery("form").validationEngine();
jQuery(".back_cart_button, .back_to_customer_button").click(function(){
jQuery("form").validationEngine('hideAll');
jQuery("form").validationEngine('detach');
return true;
});
});
</script>
<?php endif; ?>
そして、コードは必ずwp_headより後、</head>より前に書くようにします。
wp_headが先程のjQuery本体を吐き出すので、その後にフォームチェックの命令を書かないと動かないためです。
4. 必要な入力項目にclassを追加する
jQuery-Validation-Engineを入力フォームで動かすために、Welcartの当該ページの入力項目のclass名を追加します。
（2014/4/24更新）以前の方法では、退避させたテンプレートのコードを書き換えたり、フックを利用して入力項目にclassを付与させていましたが、jQueryを使った簡単な方法に改良しました。
以下のコードを、3.の「jQuery("form").validationEngine();」のコードの上に足します。
jQuery("input[name*='mailaddress1'],input[name*='mailaddress2'], #name1, #name2, #zipcode, #customer_pref, #address1, #address2, #tel").addClass("validate[required]");
jQuery("#customer_pref option:first-child").val("");
jQueryのaddClassという、class属性を付与する命令を使って、以下の項目にvalidate[required]というclassを追加しています。
- メールアドレス
- メールアドレス（再入力）
- お名前
- 郵便番号
- 都道府県
- 市区郡町村
- 番地
- 電話番号
更に、Validation Engineを動かす為には、都道府県の選択項目の最初のoptionのvalue値が空欄になっていないといけないのですが、Welcartでは「–選択–」というvalue値が最初から入っているので、これを削除する（空にする）命令も加えています。
これで、必須項目にはリアルタイムの入力チェックが効くようになります。
validate[]のカッコの中身で、チェック内容をカスタマイズ
追加するclass=”validate[]”のカッコの中身をカスタマイズすれば、チェック内容を変更することが出来ます。
例えば、先ほどのclass属性を付与するjQueryの命令では、全ての必須項目をまとめて必須項目のみのclass=”validate[required]”の追加だけにしていますが、メールアドレスかどうかのチェックをメールアドレスの項目につけたい場合は、
input[name*=’mailaddress1′],input[name*=’mailaddress2′]
の設定は上記コードから外して別にしてあげて、
jQuery("input[name*='mailaddress1'],input[name*='mailaddress2']").addClass("validate[required,custom[email]]");
という感じでjQueryを書けば、必須項目に加えてメールアドレスチェックが効くようになります。
以下はカッコ内で使える項目の一部です。詳しい内容は、jQuery-Validation-Engineのダウンロードファイルのindex.htmlを開くと載っています。
| チェック内容 | コード | 説明 |
|---|---|---|
| 必須項目 | required | 必須項目をチェック |
| 要素のチェック | custom[要素名] | 入力された値が[要素]（メールアドレス[email]や半角英数[number]など）かどうかをチェック |
| 入力内容の一致 | equals[フィールドid] | 入力された値が[フィールドid]に入力された値と一致しているかをチェック |
郵便番号や番地などの数字の入力は、カゴ落ち対策のために全角でもOKにしておいたほうが良いので、私なら数値の要素チェックは設置しません。
と言うわけで、Welcartでは変更箇所が多岐に渡る為、かなり長い記事になってしまいました。
カゴ落ち対策ではありますが、かなり複雑なカスタマイズになります。カスタマイズ前のデータはいつでも復元出来るように保存した上で、ローカル環境で十分な動作チェックを行って下さい！
いつも当サイトにて楽しく勉強させて頂いてます。welcartのカスタマイズをまとめているブログはなかなか無くて、とても助かっております！
「カレンダーの文言を変更」や「商品一覧ページの在庫状況の表示」、「カゴ落ち対策」と、こちらのサイトを参考にカスタマイズをしました。
その中で、 「お客様情報入力でのリアルタイムチェック」についてお伺いしたいのですが、都道府県を選択するセレクトボタンにうまくチェックさえることができません。
もしよろしければ、Mamekkoさんの設定している方法を教えて頂けますでしょうか？
ご多忙かと存じますが、ご教授頂ければ幸いです。
初めまして、コメントありがとうございました。HNから「すごいよ！マサルさん」を思い出してしまった世代です（ご存知なかったらごめんなさい！）。
都道府県、確かに、「国を非表示に・・・」のコードでは、classが設定出来ないですね！申し訳ございません。（先にzipaddr-jpをプラグインを導入していたので、都道府県が設定出来ていないことに気付いておりませんでした・・・と言い訳・・・。）
都道府県を選択させるコードusces_pref_selectは、Welcartプラグインの中（functions/functions.phpの3352行目あたり）にあり、これをいじってしまうとアップグレード時に上書きされてしまいます。ですので、私ならばこうします。
ここにコードを書くと長くなりそうなので、記事中にアップしますね！
早速コメントありがとうございます！
僕も「すごいよ！マサルさん」世代で、よく友達に言われてました笑
支払い方法選択のチャックボタンでバリデーション効かせるのも、コードを見る限り同じ要領っぽいですね。
これだけまとまった記事を書くのは大変かと思いますが、楽しみにしてます！！
「めそ・・・」がお分かりになる世代の方でしたか！ふなっしーも、後ろのファスナーを隠さないあたり「マサルさん」世代かな・・・なんて思ったりします（笑）
私も勉強しながらなので裏では必死だったりすることもありますが、読んで下さってる方がいるんだな～と嬉しかったです！コメントありがとうございました^^
記事の追記ありがとうございます！
おかげさまで実装することができました★
めそ…とはまた懐かしいですね〜笑
welcartのカスタマイズでは一番まとまっているので参考にしている人は多いかと思いますよ！
なので、大変かと思いますが、これからも記事を楽しみにしてます！
あと無料のテーマも！！
励みになるコメントありがとうございます！テーマはまだ少しかかりそうなので、気長にお待ち頂ければ嬉しいです^^
Class属性を付与する部分を、jQueryの命令で楽に行う方法に内容を更新しました。読んでいらっしゃるかわかりませんが、ご質問頂いていた部分でもあるので、一応ご報告致します。
ご丁寧に、更に便利なカスタマイズ方法をありがとうございます！
今はテーマ−制作中なので、毎日のようにこちらのブログを参考にさせてもらっています♪
また、便利なカスタマイズの記事を楽しみにしてます！！
頑張ってください★
ご質問失礼致します。
リアルタイムチェックフォームを検索し、こちらに辿り着きました。
お尋ねしたい事があるのですが、
こちらのプラグインで禁則文字、拒否ホスト名またはIPアドレスを正規表現で記述するには
どの様な方法がありますでしょうか？
＝＝＝＝＝＝＝＝＝＝
例えばメールアドレス枠に
@aaa.co.jp
@bbb.co.jp
を入力したらエラー表示させる
＝＝＝＝＝＝＝＝＝＝
大変お手数ですが、ご教授お願い致します。
プラグインのドキュメンテーションを見てみましたが、ご希望の方法はもしかしたらAjax Callを使えば出来そうですかね。
http://www.position-relative.net/creation/formValidator/demos/demoAjaxSubmitPHP.html
私はAjaxはそんなに得意ではないため細かいところは何とも申し上げられないのですが、PHPの別ファイルに予め有効（または無効）の文言を入れておいて、入力時にAjaxで呼び出して判断させるタイプのようです。プラグインのダウンロードフォルダにも上記ページで行っているバリデーションのサンプルが入っていますが、単にif文で判断させているだけのようなので、ご参考になさってみては如何でしょうか。
はじめまして、お世話になっております。
Welcartを利用してホームページを作成しており、本ホームページには大変助けられております。ありがとうございます。
このjQuery-Validation-Engineを利用した「入力項目をその場でチェック」をやろうと思ったのですが、どうしてもうまく出来ません。
例えば、本ページに記載のコードをコピペしてやってみると、ページが表示しなくなります。
そこで、無料で配布して頂いているテーマ（blanc）からその部分を拝借しますと、ページは表示されるのですが、jQuery-Validation-Engineが効いていません。
コード的には特に問題はないように思えますがうまく効いてくれない感じです。
他のWordpressプラグインとの競合も考えられますが、プラグインはそのままでテーマをblancにするとちゃんと効いています。
もしかしたらfunctions.phpに記載してある他のコードとの兼ね合いかもしれませんがPHPやWordpressはあまり詳しくないため原因がつかめません。
気になる部分は、以前Welcart主催のセミナーに参加した時にやった、国を非表示にする部分で、usces_filter_apply_addressformをまるっとコピーして、country部分を削除している感じです。
独学で難儀していますが、なにか原因がお分かりでしたらご教授願いたいと思います。
色々と原因が考えられるかなと思うのですが、パッと思いつく限りでは、こんな感じでしょうか？
Blancを使ったら動くということなので、「1」ではなく「2」の可能性が高いですかね。
ちなみに「国を非表示」は、Welcart本が出版された後、Welcart本体のほうで「販売国が1カ国だけだった場合は、デフォルトで国選択は非表示」になったので、カスタマイズは不要になっています！
「まるっとコピー」している部分は、入力フォームを全て上書きして出力させるものなので、やはりclassの付与がうまく行っていないのではと拝察致します。もし「まるっとコピー」をそのまま使うのであれば、そのコードの中のinput項目に、Validation Engineに必要なclass（例えば
validate[required]とか）を追加してみたら動くのではと思います。お忙しい中、ご返信ありがとうございます。
「jQueryのセレクタがうまく効いていない」の可能性っぽいですね。
今一度その方向で検証してみます。
「国表示が1か国の場合デフォルトで非表示」は知りませんでした。（汗）
このコードはとりあえず消そうと思います。
blancのfunctions.phpに国を非表示の記述が無かったのでどうやってるんだろうと思ってました。
まめ子さんお勧めのエビスコム「WordPress ステップアップブック」を購入したので、勉強してレスポンシブ対応までにしていきたいと思います。
本ホームページは今後もお世話になりますのでよろしくお願いいたします。
すみません、超凡ミスでした。
use-validationEngine.jsの名前のlとrを間違えていました。。。
これだけでほぼ出来たのですが、1点、mailaddress1にだけclassの追加が出来ないと言う不思議な事態が起きています。
スペルの間違いなどかなり細かく見たと思うのですが。
もしこのようなケースの原因がお分かりでしたらご教授願いたいと思います。
jQueryの命令では、『name属性に
mailaddress1が含まれているinput要素に、「validate[required]というclass追加する』というふうになっています（項目4の最初のコードの1行目）。それがうまく動いていないということだと思いますが・・・。セレクタの指定・もともと出力されているinput要素の中身などを再確認なさってみては如何でしょうか。ちなみに、Welcartのお客様情報ページでは
id="mailaddress1"が重複して指定されてしまっているので（本体のミスと思われます）、セレクタをidで指定する方法は、この記事内でのカスタマイズでは避けております（Blancではid重複はテンプレート内で直しています）。ご返信ありがとうございます。
まさにその部分でした。
何故かログインして購入する場合のIDとPASSのinput要素のIDがどちらも「mailaddress1」となっていることが原因でした。
テンプレート内でそれぞれ適当なIDに変更したらうまくいきました。
ちなみに各項目のtypeもすべてtextだったので、そちらもそれぞれ変更したら無事に使えるようになりました！（.attr()で変更しているので必要ないかもしれませんが）
お手数をおかけしましたが、丁寧にご返信くださり本当にありがとうございました。
うまく行って良かったですね！
こんにちは
大変参考になり、感謝しています。
さて、
3. の例をコピーしましたが、なぜか動かなかったので、その下の例にならって、
jQuery(document).ready(function(){…});
としたら動きました。
ところが、Paypalエキスプレスを使用していると、会員モードで、
カートに戻った時にPaypalショートカットのボタン周りの
レイアウトが崩れてしまう不都合がありました。
本来このページは、if文
によって、スプリプトは無効のはず。力不足で原因がわかりませんでした。
そこで、header.phpに書いたコードは削除し、そこに書いていたスクリプトの
jQuery(document).ready(function(){…});
をファイル myValidation.jsとし、テーマのjsディレクトリに配置、
そしてfunction.phpに、以下のコードを加えたところ正常に動くようになりました。
add_action( 'wp_enqueue_scripts', 'myScript' );
function myScript() {
$usces_validation = array( 'newmemberform', 'member', 'customer', 'delivery' );
global $usces;
if( in_array( $usces->page, $usces_validation ) ){
wp_enqueue_style( 'validationEngine-css', get_template_directory_uri() .'/css/validationEngine.jquery.css', 'all' );
wp_enqueue_script( 'validationEngine.js', get_template_directory_uri() .'/js/jquery.validationEngine.js', array(), '2.6.2', true );
wp_enqueue_script( 'validationEngine-ja.js',get_template_directory() . '/js/jquery.validationEngine-ja.js', array('jquery'), '2.0', true);
wp_enqueue_script( 'myValidation.js', get_template_directory_uri() . '/js/myValidation.js', array(), '',true);
}
}
オプションをtrueにしていますので、footerに読み込まれますが、ともかく動いています。
返信が遅くなりまして申し訳ございません。補足ありがとうございます。私もjQueryはまだまだ力が及ばないので、また余裕のある時に色々試してみますね。
会員重複チェックはできないですよね？
メールアドレスにて、すでに登録済みのメールアドレスです。的な。。。
出来ないことはないと思いますが、データベース（メールアドレスが格納されている場所）を参照する必要がありますので、その場でチェックさせるのはやや複雑なステップになることが予想されます（デフォルトでは「次へ」ボタンを押した後なら自動チェックされるようになっていますが・・・）。jQueryを使ってデータベースを参照させる方法はこちらの動画が参考になると思います。
[…] 今回も「入力項目をその場でチェック jQuery-Validation-Engine」の投稿を参考にさせてもらいます。まず、「1. jQuery-Validation-Engineをダウンロード、必要なファイルをテーマ内に移す」の部分 […]