非同期通信でバリデーションするメリット
リアルタイムでの入力値チェックを行うため、送信ボタンを押した後にエラーが出て進めなーーーーい、なんてストレスから解放されます。送信ボタンを押したときには入力値チェックや相関チェック済なのでユーザビリティが保てますね＾＾
送信できなくて離脱していくユーザーを取りこぼさないためにも、非同期通信でのバリデーションはお勧め！
step１ JQuery Validation Engineを配置する。
JQuery Validation Engineのダウンロードはこちらダウンロードしたファイルから下記の３ファイルのみ配置します。
ワードプレステーマ配下にvalidationフォルダを作成しておくと分かりやすいです＾＾
パス：/wordpress/wp-content/themes/自分が使っているテーマ/validation
- jquery.validationEngine.js
- jquery.validationEngine-ja.js
- validationEngine.jquery.css
step2 functions.phpでクラスを追加
ファイルを配置しただけではまだ使えません。functions.phpでファイルを呼び出しましょう。
/* --------------- バリデーションを追加する --------------------- */
add_action('admin_head' , 'custom_js_and_css');
function custom_js_and_css() {
$dir = get_template_directory_uri();
echo "<script type=\"text/javascript\" src=\"{$dir}/validation/jquery.validationEngine.js\"></script>\n";
echo "<script type=\"text/javascript\" src=\"{$dir}/validation/jquery.validationEngine-ja.js\"></script>\n";
echo "<link type=\"text/css\" rel=\"stylesheet\" href=\"{$dir}/validation/validationEngine.jquery.css\" />\n";
//validationを有効にする
echo <<< HTML
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#post").validationEngine();
});
</script>
HTML;
}step3 jquery.validationEngine-ja.jsにオリジナルルールを追加
これで非同期通信でのバリデーションが使えるようになりました。バリデーションをかけたい入力フィールドのinputタグにバリデーションエンジンのclassを追加していきます！
<input class="validate[required, custom[任意の名称]]">必須であればclass=”validate[required]”
任意であればclass=”validate[optional]”
詳しくはデフォルトのバリデーションルールを参照
custom[任意の名称]は自分でバリデーションルールを追加できます。バリデーションルールの追加は「jquery.validationEngine-ja.js」のファイル内で作成します。
例えば全角のみを入力させたいルールは以下のように作成します。
"zenkaku": {
"regex": /^[０-９－ａ-ｚＡ-Ｚぁ-んァ-ー一-龠 ＜＞/ ]+$/,
"alertText": "* 全角文字で入力してください"
}この場合のinputタグのクラスはこのようになりますね。
class="validate[custom[zenkaku]]"alertTextには正規表現でエラーメッセージを設定しています。
正規表現は下記のページを参考に設定しました。
http://daipresents.com/2008/java_regex/
http://www.tohoho-web.com/js/regexp.htm
http://www.megasoft.co.jp/mifes/seiki/index.html
デフォルトのバリデーションルール
| ルール名 | 内容 |
|---|---|
| required | 必須入力チェックを行う |
| remote | バリデーション結果をサーバに問い合わせる |
| 入力値がメールアドレスのフォーマットであるか | |
| url | 入力値がURLのフォーマットであるか |
| date | 入力値が日付であるか |
| dateISO | 入力値がISO形式の日付であるか |
| number | 入力値が数字であるか |
| digits | 入力値がクレジットカード番号のフォーマットであるか |
| creditcard | 入力値がクレジットカード番号のフォーマットであるか |
| equalTo | 入力値が指定した値と一致しているか |
| maxlength | 入力値が指定した桁数以下か |
| minlength | 入力値が指定した桁数以上か |
| rengelength | 入力値が指定した桁数の範囲であるか |
| renge | 入力値が指定した数字の範囲であるか |
| max | 入力値が指定した数字以下であるか |
| min | 入力値が指定した数字以上であるか |
step4 複数パラメーターをAPIに送る
自作APIにパラメーターを受け渡して、true falseを返すことで独自のバリデーション処理を作ることができます。下記functions.phpで入力フォームで複数パラメーターをAPIに送る例です。
（２行目はinput typeをhiddenで隠しフィールドにしています。記事IDなど入力値パラメータ以外はhiddenにいれるといいでしょう。）
echo '<input type="text" id="パラメーターID" required value="送りたいパラメーター" size="80" class="validate[required,ajax[ajaxカスタム名]]"><br>';
echo '<input type="hidden" id=パラメーターID2" name="post_id" value="送りたいパラメーター2">';jquery.validationEngine-ja.jsのファイル 120行目あたりからカスタムルールを追加できる欄が用意されています。
inputタグ内で指定したパラメーターを"extraDataDynamic":に配列として指定してあげることでAPI側に複数パラメーターを受け渡せます。
"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": "* 検索中"
},＃注意
API側では$_GET['パラメーターID];がで受け取ることができますが受け取る際は＃は外しておきましょう。
step５ APIでの処理をjson_encodeする。
上記までの流れ、functions.phpで作成したフォームのパラメーターをjquery.validationEngine-ja.jsで配列としてAPIに渡します。
APIでは$_GET['パラメーターID];でパラメーターを受け取ることができます。
条件分岐やループで記事の比較等の処理を行った後、true falseを返します。
以下参考にしてください。
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/wordpress/wp-load.php'); //WP関数を使えるようにする
$args = array( 'posts_per_page' => -1, 'post_type' => '投稿タイプ' ); // データを取得する条件を設定
$myposts = get_posts( $args ); // データを取得
if ($myposts){ // データがあるかどうか
foreach ( $myposts as $post ){
setup_postdata( $post );
$変数１ = get_post_meta($_GET['パラメータ'], 'フィールドネーム', true);
$変数２ = get_post_meta($post->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);
今回は例としてGETで渡ってきたパラメーターが常に登録済かをチェックするAPIを作ってみました。
最後にフィールドIDとステータス（true 、false）を変数に入れてjson_encodeするとバリデーションAPIの完成です＾＾
まとめ
一つのパラメーターを受け渡す記事はたくさんありますが、複数パラメーターの受け渡し記事はほとんどないので、"extraDataDynamic"を使えるようにメモとして残しておきます。