exValidationとcontact form7を使ってお問い合わせのバリデーションを実装

バリデーションとは

指令にバリデーションの有無を検討と書いてある。なんぞ？

WordPressプラグイン Contact Form7を使ってお問い合わせページを実装。
ふぅ。
確認ボタンがないのが気になる。
これまたプラグインContact Form 7 add confirmにて実装。
方法は↓
Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン

この辺はスムーズにできて、上司に報告。そのときに

バリデーションってどのような機能？作業でしょう？と聞いてみたら

ヴァリデーションてのは入力チェックのことです。
・必須項目が入力されているか
・メールアドレスは適切なメールアドレスの形式か
・数字は半角？全角？
・フリガナに漢字やひらがなが入ってない？

とのこと。ヴァリデーション。ヴァ！
あぁ！見たことありますね。「半角ね」とか「必須よ」とか。あれですね。

そして、上司の話によるとJavaScript（jQuery）でやると簡単とのことだったので、
ぐぐってみた。

exValidationを使ってみよう！

ぐぐってみてでてきたのは
exValidation
jquery.validationEngine.js
あたり。
２つ目を使った記事は少し古かったので、一つ目の方に。

本家サイト5509.meが削除されてる？

やり方はこちらを見て挑戦
どんなフォームにでも使える exValidation の使い方 基本編
本家サイトが消えてしまったらしく、私は本家を見ることができないでいたので、丁寧に書いてあってよかった。

ダウンロードはこちら
※画面右下のDownload zipボタンからダウンロード
https://github.com/5509/exValidation

はまってしまった所をピックアップ

エラー表示がでる。どうやらjsを読み込んでない

これはよくありがち、こちらもググって解決。
とにかく順番が大事！jQueryとwp_headを読み込んでからなので、その後に書く。そして/headの前。
それと、WordPressはもともとjQueryが入ってるのでそれを使うようにする（重複させない）

<?php 
wp_enqueue_script('jquery');
wp_head(); 
?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exvalidation.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exchecker-ja.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/exvalidation.css"/>

参考にした本

これ、最後の数ページにしかjQueryの事載っておらず、初心者の初心者の時はこれでわかるか！
って感じでしたが、今みると、なるほど。という感じ。

エラー表示でないけど、exValidationが動かない！Contact Form7はformにIDつけられない？

先輩に確認してもらう。ちなみに私はJavaScript超初心者。
alertやsizeというのを使って、ちゃんと読み込んでいることを確認してもらった。

<script type="text/javascript">
jQuery(function(){
    alert( jQuery("form.wpcf7-form").size() );
    var validation = jQuery("form.wpcf7-form").exValidation();
});
</script>

また、ここで困ったのがContact Form7のformタグにidが付けられない事。
参考にしている記事はformタグにIDを指定していたので、
そうしないとできないのかしら？と悩んだ。

結果は、class指定でOK
“form.wpcf7-form”　←formタグのclass名wpcf7-form

もうこうなったらHTMLから確認してみる！少し躓いたらこれがオススメ

どうにもこうにも動かない理由がわからないので、
先輩に助けを求めつつ、デスクトップ上でHTMLをいじりながら一つ一つ確認。
ちなみに、ファイルは先程のサイトで落とせるので、それをカスタマズしながら。

どんなフォームにでも使える exValidation の使い方 基本編

タグにid指定が必要＆二個以上はダメ。$表記もダメ

[ text* your-name id:◯◯ ]

こんな感じに作られるショートコードでidをしっかり指定します。

そのidはjsでも定義。既述のサイトを参考にして作っています。
ポイントは$表記だとWordPressでは動かなかった。$→jQueryに全部書き直しましょう（１個でも残っていると動かなかった）

jQuery(function(){
	var validation = jQuery("form.wpcf7-form")
		.exValidation({
		    // それぞれの項目に「class="chkrequired chkkatakana"」のように記述しているのと同じことをしています。
			rules: {
				name: "chkrequired",
				name_: "laterCall",
				kana: "chkrequired chkkatakana",
				kana_: "laterCall",
				email: "chkrequired chkemail chkhankaku",
				email_: "laterCall",
			},
			customListener: "blur", // onBlur時のみにしてみる
			stepValidation: true,
			errTipCloseBtn: false,
			errHoverHide: true, // マウスオーバーで消える
			scrollToErr: true   // 
		});
    // チェックボタンで確認する場合
	jQuery('input.laterCall').click(function() {
		validation.laterCall('#' + this.id.replace('_',''));
	});
});
// エラー削除
function clearErrors() {
	// 表示されているエラーをフェイドアウト
	$("div[id*=err_]").fadeOut();
}

exValidationのCSSファイルのみでよいかと思ったら、style.cssも使った

やっとこそさ、動き始めた！
と思っても、なぜか色がつかない。
classのつけ忘れかなーと思ってみていると、どうやら、同じexValidationCSSファイル内のstyle.cssに書かれた、テーブルのデザインも必要なのかしらね。
なので、exValidationにもともとのデザインを損なわないように追加で貼った。

動いた！！！けれど、項目を追加していくとまた動かない

ついに動いて、項目をドンドン追加。
すると、動かない。
な、なんで・・・

ということで、ここもまた、
一つ一つ追加しては動作確認していきました。

わかったのはJavaScriptで「,」を私はよく忘れている・・・

もともとの文法がまったくわかっていないので、間違いにも気づきにくいんですよね。

自分で実装するか、exValidationを使うか

同時進行で先輩に助言をいただいたのですが、
「exValidationのようなものは使わずに自分で実装するのがよいよ」
と。
おぉそういえば、私の職業プログラマだった・・・

とはいえ、無事実装できたのでひとまずこれで！
そのうち簡単なものくらい自分で実装するスキルも身につけなければ・・・

またサイトがなくなっては困っちゃうのでメモ

エラーの文字列の調整はexchecker-ja.js を書き換えて行える。

↓既にあるもの

chkrequired: “入力してください”
chkselect: “選択してください”
chkretype:”入力内容が異なります”
chkemail: “正しいメールアドレスの形式を入力してください”
chkhankaku: “全角文字は使用できません”
chkzenkaku:”全角文字で入力してください”
chkhiragana: “ひらがなで入力してください”
chkkatakana:”カタカナで入力してください”
chkfurigana: “ふりがなはひらがな、全角数字と〜、ー、（）が利用できます”
chknochar: “英数字で入力してください”
chknocaps: “英数字(小文字のみ)で入力してください”
chknumonly: “半角数字のみで入力してください”
chkmin: “文字以上で入力してください” // chkmin6 で６文字未満NG
chkmax: “文字以内で入力してください” // chkmax10 で１０文字を超えるとNG
chkradio: “選択してください”　　// ラジオボタンの場合
chkcheckbox: “選択してください” // チェックボックスの場合
chkurl: “正しいURLの形式を入力してください”
chktel: “正しい電話番号を入力してください”
chkfax: “正しいファックス番号を入力してください”
chkfile: “ファイルを選択してください”