ワードプレスでJQuery Validation Engineを使って複数パラメーターを受け渡す


<h4>非同期通信でバリデーションするメリット</h4>
リアルタイムでの入力値チェックを行うため、送信ボタンを押した後にエラーが出て進めなーーーーい、なんてストレスから解放されます。

送信ボタンを押したときには入力値チェックや相関チェック済なのでユーザビリティが保てますね＾＾

送信できなくて離脱していくユーザーを取りこぼさないためにも、非同期通信でのバリデーションはお勧め！

&nbsp;
<h2>step１　JQuery Validation Engineを配置する。</h2>
<a href="https://github.com/posabsolute/jQuery-Validation-Engine">JQuery Validation Engineのダウンロードはこちら</a>

<a href="https://wp.me/pax0Ii-7J">GitHubからファイルのダウンロード方法はこちら</a>

ダウンロードしたファイルから下記の３ファイルのみ配置します。

ワードプレステーマ配下にvalidationフォルダを作成しておくと分かりやすいです＾＾

パス：/wordpress/wp-content/themes/自分が使っているテーマ/validation
<ul>
 	<li>jquery.validationEngine.js</li>
 	<li>jquery.validationEngine-ja.js</li>
 	<li>validationEngine.jquery.css</li>
</ul>
<h2>step2　functions.phpでクラスを追加</h2>
ファイルを配置しただけではまだ使えません。

functions.phpでファイルを呼び出しましょう。
<pre class="lang:php decode:true" title="functions.php">/* --------------- バリデーションを追加する --------------------- */
add_action('admin_head' , 'custom_js_and_css');
function custom_js_and_css() {
	$dir = get_template_directory_uri();

	echo "&lt;script type=\"text/javascript\" src=\"{$dir}/validation/jquery.validationEngine.js\"&gt;&lt;/script&gt;\n";
	echo "&lt;script type=\"text/javascript\" src=\"{$dir}/validation/jquery.validationEngine-ja.js\"&gt;&lt;/script&gt;\n";
	echo "&lt;link type=\"text/css\" rel=\"stylesheet\" href=\"{$dir}/validation/validationEngine.jquery.css\" /&gt;\n";

//validationを有効にする
echo &lt;&lt;&lt; HTML
&lt;script type="text/javascript"&gt;
jQuery(document).ready(function(){
	jQuery("#post").validationEngine();
});
&lt;/script&gt;
HTML;
}</pre>

<h2>step3　jquery.validationEngine-ja.jsにオリジナルルールを追加</h2>
これで非同期通信でのバリデーションが使えるようになりました。

バリデーションをかけたい入力フィールドのinputタグにバリデーションエンジンのclassを追加していきます！
<pre class="lang:php decode:true" title="inputタグ">&lt;input class="validate[required, custom[任意の名称]]"&gt;</pre>
必須であればclass=”validate[required]”
任意であればclass=”validate[optional]”
<h6 id="H30C730D530A930EB30C8306E30D030EA30C730FC30B730E730F330EB30FC30EB">詳しくはデフォルトのバリデーションルールを参照</h6>
custom[任意の名称]は自分でバリデーションルールを追加できます。

バリデーションルールの追加は「<span id="jqueryvalidationEngine-jajs">jquery.validationEngine-ja.js</span>」のファイル内で作成します。

例えば全角のみを入力させたいルールは以下のように作成します。
<pre class="lang:js decode:true " title="jquery.validationEngine-ja.js">  "zenkaku": {
                  "regex": /^[０-９－ａ-ｚＡ-Ｚぁ-んァ-ー一-龠　＜＞/ ]+$/,
                  "alertText": "* 全角文字で入力してください"
                }</pre>
この場合のinputタグのクラスはこのようになりますね。
<pre class="lang:xhtml decode:true" title="class">class="validate[custom[zenkaku]]"</pre>
alertTextには正規表現でエラーメッセージを設定しています。
正規表現は下記のページを参考に設定しました。
<a class="external-link" href="http://daipresents.com/2008/java_regex/" target="_blnk">http://daipresents.com/2008/java_regex/</a>
<a class="external-link" href="http://www.tohoho-web.com/js/regexp.htm" target="_blnk">http://www.tohoho-web.com/js/regexp.htm</a>
<a class="external-link" href="http://www.megasoft.co.jp/mifes/seiki/index.html" target="_blnk">http://www.megasoft.co.jp/mifes/seiki/index.html</a>
<h4>デフォルトのバリデーションルール</h4>

<table>
<tbody>
<tr>
<th scope="col">ルール名</th>
<th scope="col">内容</th>
</tr>
<tr>
<td>required</td>
<td>必須入力チェックを行う</td>
</tr>
<tr>
<td>remote</td>
<td>バリデーション結果をサーバに問い合わせる</td>
</tr>
<tr>
<td>email</td>
<td>入力値がメールアドレスのフォーマットであるか</td>
</tr>
<tr>
<td>url</td>
<td>入力値がURLのフォーマットであるか</td>
</tr>
<tr>
<td>date</td>
<td>入力値が日付であるか</td>
</tr>
<tr>
<td>dateISO</td>
<td>入力値がISO形式の日付であるか</td>
</tr>
<tr>
<td>number</td>
<td>入力値が数字であるか</td>
</tr>
<tr>
<td>digits</td>
<td>入力値がクレジットカード番号のフォーマットであるか</td>
</tr>
<tr>
<td>creditcard</td>
<td>入力値がクレジットカード番号のフォーマットであるか</td>
</tr>
<tr>
<td>equalTo</td>
<td>入力値が指定した値と一致しているか</td>
</tr>
<tr>
<td>maxlength</td>
<td>入力値が指定した桁数以下か</td>
</tr>
<tr>
<td>minlength</td>
<td>入力値が指定した桁数以上か</td>
</tr>
<tr>
<td>rengelength</td>
<td>入力値が指定した桁数の範囲であるか</td>
</tr>
<tr>
<td>renge</td>
<td>入力値が指定した数字の範囲であるか</td>
</tr>
<tr>
<td>max</td>
<td>入力値が指定した数字以下であるか</td>
</tr>
<tr>
<td>min</td>
<td>入力値が指定した数字以上であるか</td>
</tr>
</tbody>
</table>
<h2>step4　複数パラメーターをAPIに送る</h2>
自作APIにパラメーターを受け渡して、true falseを返すことで独自のバリデーション処理を作ることができます。

下記functions.phpで入力フォームで複数パラメーターをAPIに送る例です。

（２行目はinput typeをhiddenで隠しフィールドにしています。記事IDなど入力値パラメータ以外はhiddenにいれるといいでしょう。）
<pre class="lang:xhtml decode:true" title="functions.php">echo '&lt;input type="text" id="パラメーターID" required value="送りたいパラメーター" size="80" class="validate[required,ajax[ajaxカスタム名]]"&gt;&lt;br&gt;';
echo '&lt;input type="hidden" id=パラメーターID2" name="post_id" value="送りたいパラメーター2"&gt;';</pre>
jquery.validationEngine-ja.jsのファイル　120行目あたりからカスタムルールを追加できる欄が用意されています。

inputタグ内で指定したパラメーターを"extraDataDynamic":に配列として指定してあげることでAPI側に複数パラメーターを受け渡せます。
<pre class="lang:js decode:true" title="jquery.validationEngine-ja.js">"ajaxカスタム名": {
                    // remote json service location
                    "url": "../wp-content/themes/自作APIのパスを記載",
                    "extraDataDynamic": ['#パラメータID', '#パラメーターID2'],
                    // error
                    "alertText": "* すでに使われています",
                    // if you provide an "alertTextOk", it will show as a green prompt when the field validates
                    "alertTextOk": "* 使用可能",
                    // speaks by itself
                    "alertTextLoad": "* 検索中"
                },</pre>
<span style="color: #ff0000;">＃注意</span>

API側では<span style="color: #ff0000;">$_GET['パラメーターID];</span>がで受け取ることができますが受け取る際は<span style="color: #ff0000;">＃</span>は外しておきましょう。
<h2>step５　APIでの処理をjson_encodeする。</h2>
上記までの流れ、

<span style="color: #0000ff;">functions.php</span>で作成したフォームのパラメーターを<span style="color: #0000ff;">jquery.validationEngine-ja.js</span>で配列としてAPIに渡します。

APIでは<span style="color: #ff0000;">$_GET['パラメーターID];<span style="color: #000000;">でパラメーターを受け取ることができます。</span></span>

条件分岐やループで記事の比較等の処理を行った後、true falseを返します。

以下参考にしてください。
<pre class="lang:php mark:25-26 decode:true " title="API">&lt;?php
require_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php'); //WP関数を使えるようにする
$args = array( 'posts_per_page' =&gt; -1, 'post_type' =&gt; '投稿タイプ' ); // データを取得する条件を設定
$myposts = get_posts( $args ); // データを取得

if ($myposts){ // データがあるかどうか
  foreach ( $myposts as $post ){
        setup_postdata( $post );
        $変数１ = get_post_meta($_GET['パラメータ'], 'フィールドネーム', true);
        $変数２ = get_post_meta($post-&gt;ID, 'フィールドネーム', true);

        if($_GET['パラメーター'] == $変数１){
          $status = true;
          break;
        }elseif($_GET['パラメーター２'] == $変数２){
          $status = false;
          break;
        }else{
          $status = true;
        }
  }
  wp_reset_postdata();
}

$a = array($_GET['fieldId'], $status);
echo json_encode($a);
</pre>
&nbsp;

今回は例としてGETで渡ってきたパラメーターが常に登録済かをチェックするAPIを作ってみました。

最後にフィールドIDとステータス（true 、false）を変数に入れてjson_encodeするとバリデーションAPIの完成です＾＾

&nbsp;
<h4>まとめ</h4>
一つのパラメーターを受け渡す記事はたくさんありますが、複数パラメーターの受け渡し記事はほとんどないので、

"extraDataDynamic"を使えるようにメモとして残しておきます。

&nbsp;