日本語ローカライズした jquery.validationEngine.jsでContact Form 7の入力値をチェックする  |  wpxtreme｜XTREME WORDPRESS STUNTS

ていうか、正式名称は Inline Form Validation Engine なんだろうけど、js ファイルだけじゃなくてプラグインの紹介記事にもちゃんと名前書いといた方が良いぜ。WordPress のプラグインにもよくあるけど使ってる名称がバラバラだとわけわからんのだぜ。とりあえず、この記事では当該 jQuery プラグインを validationEngine と呼ぶことにします。以下、デモフォームにインテグレーションしてみましたのでテキトウにいじってみてください。

DEMO フォーム

入力値が OK 値でないときに各欄からフォーカスを外すか SEND をクリックするとエラー表示されます。OK 値を入力するとエラー表示が消えます。このフォームは SEND してもどこにも送信されません＆保存してませんので、SSL で無くても良いなら上司の悪口や彼氏への不満、あの子への告白などご自由にブチまけてください。

Contact Form 7 フォームの設定

［コンタクトフォームの編集］画面でタグを作成するときに jQuery 側で利用するための id, class を設定しておくこともできますが、Contact form 7 は jQuery プラグインの事情なんか知ったこっちゃないので書かない方が何かとよろしいです。jQuery プラグインで必要な情報は、jQuery 側で後ほど設定します。

<p>お名前 (必須）<br />
    [text* your-name] </p>

<p>年齢<br />
    [text your-age]</p>

<p>メールアドレス (必須）<br />
    [email* your-email] </p>

<p>日付 (書式 YYYY-MM-DD）<br />
    [text your-date]</p>

<p>電話番号<br />
    [text your-phone]</p>

<p>チェックボックス (2〜3個選択）<br />
    [checkbox* checkbox-331 "チェック1" "チェック2" "チェック3" "チェック4"]</p>

<p>ラジオボタン <br />
    [radio radio-926 "ラジオ1" "ラジオ2" "ラジオ3" "ラジオ4"]</p>

<p>メッセージ本文 (必須：5〜10文字）<br />
    [textarea* your-message 20x5]</p>

<p>[submit "送信"]</p>

checkbox-331 とかは Contact Form 7 でデフォルトで生成される名前そのままですので気にしないで OK。実際にご利用される際は、メール送信前に Contact Form 7 による入力値チェックも行われます。

validationEngine を適用させる

自分のテーマ用に my-script.js とかなんとかファイルを作成して以下のコードを書きます。

jQuery(document).ready(function($){
  if(jQuery.fn.validationEngine){
    $('div.wpcf7 > form')
      .ajaxFormUnbind()  // Contact Form 7 のサブミットを unbind
      .find('input, textarea, select')
        .each(function(index){  // id 未設定の要素に id を付け加える
          if(! $(this).attr('id'))   
            $(this).attr('id', $(this).attr('name').replace('[]', '') + '-' + index)
          }).end()
      .find('input[name=your-name]').addClass('validate[required]').end()
      .find('input[name=your-age]').addClass('validate[optional,custom[onlyNumber],length[0,3]]').end()  // 任意
      .find('input[name=your-email]').addClass('validate[required,custom[email]]').end()
      .find('input[name=your-date]').addClass('validate[optional,custom[date]]').end()        // 任意
      .find('input[name=your-phone]').addClass('validate[optional,custom[telephone]]').end()      // 任意
      .find('input[name=checkbox-331[]]').addClass('validate[required,minCheckbox[2],maxCheckbox[3]]').end()
      .find('textarea[name=your-message]').addClass('validate[required,length[5,10]]').end()
      .validationEngine({
        validationEventTriggers:"blur", // 入力欄からフォーカスを外すと、、、
        inlineValidation: true,         // 、、、バリデーションするぜ
        success: function(){           // バリデーション OKの場合、サブミット処理へ
          try{
            $('div.wpcf7 > form').ajaxSubmit({  // ajax で submit
              beforeSubmit: wpcf7BeforeSubmit,
              dataType: 'json',
              success: wpcf7ProcessJson
            });
          } catch (e) {
          }
          return false;
        }
      });
  }
});

「id 未設定の要素に id を付け加える」のとこはもっとスマートにならんのかね。指定の属性*値*を持たない要素は選択できても、指定の属性を持たない要素はセレクトできないのか jQuery。がっかりだぞ。
validationEngine では、入力値チェックしたい要素のクラスに validate[ルール] を指定します。他にも自分なりのクラス名を与えたい場合は、validate[ルール] my-class のように後に書き加えてくださいだそうです。見たところどこでも関係なさそうですけど。ルールの詳細は 本家ページ の Customizations 前後を参照してください。入力必須じゃないけど値が入力されていた時だけ入力値チェックをする場合（上記コードで // 任意 の行）は、optional ルールを最初に指定します。

プラグインの相性

ロジックの世界に相性なんて人間臭いものがあるのは不思議ですよね。アレとコレを一緒に使うとちゃんと動かなくなる、のは他者への配慮が足りないからです。人間が作るものだから人間の世界と同じことが起こるんですね。
validationEngine は クラス名に 'validate' を含む、フォーム以下の要素すべてに対して validation をします。

validationEngine での、入力値チェックが必要な要素の選択の仕方：

$(フォーム要素).find("[class*=validate]")

　— span, div などフォームの入力に無関係の要素でもクラス名に validate を含めば選択されてしまう

if(null == getRules) return false;

validationEngine を日本語ローカライズ

validationEngine にはローカライズ用の jquery.validationEngine-fr.js, jquery.validationEngine-en.js が同梱されており、これに則って ja 版も作成することができます。老化ライスってゆーとなんだかとってもイヤですが、このローカライズは特に難しいことはありません。テキストベースって良いですね。.mo とかわけわからん。Poedit とか謎過ぎる。ただし、jQuery のラッパーから出ちゃってて $ is not defined 的なことになる部分がファイルの最後らへんにあるので以下のように要修正です。

オリジナル：
})(jQuery);

$(document).ready(function() {	
  $.validationEngineLanguage.newLang()
});

修正後：
  $(document).ready(function() {	
    $.validationEngineLanguage.newLang()
  });
})(jQuery);

関連ファイルの読み込み

validationjEngine.jquery.css, jquery.validationEngine.jp, jquery.validationEngine-ja.js, my-script.js と必要なファイルがたくさんあるので、これらを wp_enqueue_なんとか を使ってアナタのテーマに含めましょう。各ファイルをテーマフォルダ直下に保存して、以下を functions.php に追加します。

function my_enqueue_styles() {
  wp_enqueue_style('validationEngine', get_bloginfo('template_url') . '/validationEngine.jquery.css', array(), false, 'all');
}
add_action( 'wp_print_styles', 'my_enqueue_styles');

function my_enqueue_scripts() {
  wp_enqueue_script('validationEngine-ja', get_bloginfo('template_url') . '/jquery.validationEngine-ja.js', 
    array('jquery'), false, true);
  wp_enqueue_script('validationEngine', get_bloginfo('template_url') . '/jquery.validationEngine.js', 
    array('jquery', 'validationEngine-ja'), false, true);
  wp_enqueue_script('my-script', get_bloginfo('template_url') . '/my-script.js', 
    array('jquery', 'jquery-form', 'contact-form-7', 'validationEngine-ja', 'validationEngine'), false, true);
}
add_action( 'wp_print_scripts', 'my_enqueue_scripts' );

ここでは依存スクリプトを全部書いてますが、自分に必要なモノだけを書いとけば後は WordPress がうまいことやってくれるので、

wp_enqueue_script('my-script', get_bloginfo('template_url') . '/my-script.js', 
    array('contact-form-7', 'validationEngine'), false, true);

のように簡単に書けばよろしいです。

SEND しても送信させない方法

Contact Form７を使ったデモフォームで、実際には送信させない方法をメモっておきます。まずは my-script.js で当該のフォームに「ダミーですよ」の情報を付け加えます。

$('.div.wpcf7 > form')
  .append('<input type="hidden" name="_wpcf7_is_ajax_call_dummy" value="1" />')
    :

次に、functions.php に以下を追加。

function my_init_switch(){
  if ( 'POST' == $_SERVER['REQUEST_METHOD'] && 1 == (int) $_POST['_wpcf7_is_ajax_call_dummy'] ) {
    my_ajax_json_echo();  // ダミーだったら俺の json で返信
    exit();
  }
}
add_action('init', 'my_init_switch', 10);  // Contact Form 7 のアクションより先に実行するよう 10 を指定
  
function my_ajax_json_echo(){
  $items = array(
    'mailSent' => true,
    'message' => 'アナタのメッセージは、アチラの世界へ送り届けられました。',
    'onSentOk' => null
  );

  $echo = wpcf7_json( $items );

  if ( $_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest' ) {
    @header( 'Content-Type: application/json; charset=' . get_option( 'blog_charset' ) );
    echo $echo;
  } else {
    @header( 'Content-Type: text/html; charset=' . get_option( 'blog_charset' ) );
    echo '<textarea>' . $echo . '</textarea>';
  }
}

これでデモフォームから恥ずかしいメールがワンサカ送信されてくることは無くなります。

ダウンロード

• jquery.validationEngine-ja.js
  日本語ローカライズ，$ is undefined エラーを fix
• jquery.validationEngine.js
  非フォーム入力要素がクラス名に validate を含むときの is null エラーを fix

動作確認バージョン

• WordPress 2.9.1
• Inline Form Validation Engine 1.6.3
• Contact Form 7 2.1.1

参照

• contact form 7で入力値チェック