はじめに
リアルタイムエラーチェック導入
導入は慣れてしまえば簡単です。
導入方法は、いくつかの方法があります。Githubからダウンロードして、自分のサイトのディレクトリに保存する方法が先々を考えるとよいのですが、今回はず確実に導入できる方法をご紹介します。
「外観」―「テーマの編集」をクリック
テーマファイルのheader.phpをクリックします。
ここに以下のコードをコピペしてください。
<head></head>内のjquery.jsより後ろの位置かあるいは、</body>直前など適切な場所に以下のコードをコピペしてください。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/validationEngine.jquery.min.css' type='text/css' media='all' /> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/languages/jquery.validationEngine-ja.min.js'></script> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Validation-Engine/2.6.4/jquery.validationEngine.min.js'></script>
jQuery-Validation-Engineの実行コード記述
jQuery-Validation-Engineを実行するコードをheader.phpで記述したコードの後ろに記述します。（「jquery.validationEngine.min.js」より後ろに記述してください。）
<script>
jQuery(document).ready(function(){
jQuery("#formID").validationEngine();
});
</script>
ここに書いている、#formIDはJscriptのidを記述してください。注意してほしいのですがformIDの前の#は消さないでください。Contact Form 7のデフォルト状態ではform要素にid属性が付与されていないので、idを追加して書き込みます。固定ページにフォームを作成しますが、この時記述するcontact-form-7のショートコードにhtml_id属性を下記のように追加すれば任意のidを追加できます。
contact-form-7 id="xxx" title="xxx" html_id="formID"
jQueryでclass属性を追加
フォームのinput要素に validate[required] という形のclass属性を追加します。
基本的にはinput要素に class=”validate[required] ” と追加すれば、リアルタイムでバリデーションを行います。Emailアドレスかどうかをチェックしたい場合は class=”validate[required,custom[email]]” としてあげると、Emailとして入力してあるかをチェックします。
Contact Form 7ではinput要素に[]（角括弧）の付いたclass属性を追加できないため、jQueryのaddClass メソッドを使って追加します。jQueryは以下の通りです。
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#name").addClass("validate[required]");
jQuery("#email").addClass("validate[required,custom[email]]");
jQuery("#url").addClass("validate[required,custom[url]]");
jQuery("#tel").addClass("validate[required,custom[phone]]");
jQuery("#eisuji").addClass("validate[required,custom[onlyLetterNumber]]");
jQuery("#mojisu").addClass("validate[required,minSize[5],maxSize[10]]");
jQuery("#drop").addClass("validate[required]");
jQuery("#check input").addClass("validate[minCheckbox[2]]");
jQuery("#radio input").addClass("validate[required]");
jQuery("#message").addClass("validate[required,minSize[5]]");
});
</script>
デモで使用しているContact Form 7のLソースです↓。
<dl id="demo" class="clear"> <dt>お名前 (必須)</dt> <dd>[text* aaa id:name]</dd> <dt>メールアドレス</dt> <dd>[email* bbb id:email]</dd> <dt>URL</dt> <dd>[text* ccc id:url]</dd> <dt>電話</dt> <dd>[tel* ddd id:tel]</dd> <dt>英数字のみ</dt> <dd>[text* eee id:eisuji]</dd> <dt>5文字から10文字</dt> <dd>[text* fff id:mojisu]</dd> <dt>ドロップダウンメニュー</dt> <dd>[select* ggg id:drop include_blank "海" "川" "山" "丘"]</dd> <dt>チェックボックス 2つ以上</dt> <dd>[checkbox* hhh id:check "空" "星" "雲"]</dd> <dt>ラジオボタン</dt> <dd>[radio iii id:radio "リンゴ" "オレンジ" "グレープ"]</dd> <dt>メッセージ本文 5文字以上</dt> <dd>[textarea* jjj id:message]</dd> <dt> </dt> <dd>[submit "送信"]</dd> </dl>
デモサイト
デモサイトはこちらです。 http://alexandco-global.tokyo/validation_demo/ いかがでしょう？うまく表示できましたか？ 私も最初はうまく表示できなくて悩みました。 でも絶対できますのであきわめないでください。 どうしてもわからなければお問い合わせください。 ありがとうございました。