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

●●●
そーまっち

今回はワードプレスの管理画面の入力欄(カスタムフィールド)で入力値のチェックを行うバリデーションを実装したい

●●●
師匠

非同期通信でバリデーションできるJQuery Validation Engineというライブラリを使うとよさそうだな!

非同期通信でバリデーションするメリット

リアルタイムでの入力値チェックを行うため、送信ボタンを押した後にエラーが出て進めなーーーーい、なんてストレスから解放されます。

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

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

 

step1 JQuery Validation Engineを配置する。

JQuery Validation Engineのダウンロードはこちら

GitHubからファイルのダウンロード方法はこちら

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

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

パス:/wordpress/wp-content/themes/自分が使っているテーマ/validation

  • jquery.validationEngine.js
  • jquery.validationEngine-ja.js
  • validationEngine.jquery.css

 

step2 functions.phpでクラスを追加

ファイルを配置しただけではまだ使えません。

functions.phpでファイルを呼び出しましょう。

 

step3 jquery.validationEngine-ja.jsにオリジナルルールを追加

これで非同期通信でのバリデーションが使えるようになりました。

バリデーションをかけたい入力フィールドのinputタグにバリデーションエンジンのclassを追加していきます!

必須であればclass=”validate[required]”
任意であればclass=”validate[optional]”

詳しくはデフォルトのバリデーションルールを参照

custom[任意の名称]は自分でバリデーションルールを追加できます。

バリデーションルールの追加は「jquery.validationEngine-ja.js」のファイル内で作成します。

例えば全角のみを入力させたいルールは以下のように作成します。

この場合のinputタグのクラスはこのようになりますね。

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 バリデーション結果をサーバに問い合わせる
email 入力値がメールアドレスのフォーマットであるか
url 入力値がURLのフォーマットであるか
date 入力値が日付であるか
dateISO 入力値がISO形式の日付であるか
number 入力値が数字であるか
digits 入力値がクレジットカード番号のフォーマットであるか
creditcard 入力値がクレジットカード番号のフォーマットであるか
equalTo 入力値が指定した値と一致しているか
maxlength 入力値が指定した桁数以下か
minlength 入力値が指定した桁数以上か
rengelength 入力値が指定した桁数の範囲であるか
renge 入力値が指定した数字の範囲であるか
max 入力値が指定した数字以下であるか
min 入力値が指定した数字以上であるか

step4 複数パラメーターをAPIに送る

自作APIにパラメーターを受け渡して、true falseを返すことで独自のバリデーション処理を作ることができます。

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

(2行目はinput typeをhiddenで隠しフィールドにしています。記事IDなど入力値パラメータ以外はhiddenにいれるといいでしょう。)

jquery.validationEngine-ja.jsのファイル 120行目あたりからカスタムルールを追加できる欄が用意されています。

inputタグ内で指定したパラメーターを”extraDataDynamic”:に配列として指定してあげることでAPI側に複数パラメーターを受け渡せます。

#注意

API側では$_GET[‘パラメーターID];がで受け取ることができますが受け取る際はは外しておきましょう。

step5 APIでの処理をjson_encodeする。

上記までの流れ、

functions.phpで作成したフォームのパラメーターをjquery.validationEngine-ja.jsで配列としてAPIに渡します。

APIでは$_GET[‘パラメーターID];でパラメーターを受け取ることができます。

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

以下参考にしてください。

 

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

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

 

まとめ

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

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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です