WP-Members：項目に独自のバリデーションを追加する
Tag: WP-Members
wp-memberを使ってちょっと不便に感じたのがバリデーションが設定できないということですね。
MW WP Formのように細かく設定できるとよかったのですが…
細かく言うと「フリガナ」をカタカナ固定にしたかったんですよね。
プラグインの機能としてはないのでちょっと作ってみました。
入力項目
入力項目はこんな感じにしてみました。
セイとメイはカタカナのみ、電話番号は半角数字のみに設定したいと思います。
- ラベル：セイ – キー：sei_kana
- ラベル：メイ – キー：sei_mei
- ラベル：電話番号 – キー：tel
バリデーションを実行するアクションフック
バリデーションをどこで作るかというと、登録・更新の直前にデータを取り出せるフックが存在したのでそれ使用します。
- wpmem_pre_register_data(新規登録時)
- wpmem_pre_update_data(会員データ更新時)
function sv_pre_register_update_data( $data ) {
global $wpmem_themsg;
if( !$wpmem_themsg ) {
$wpmem_themsg = sv_validate_user_data( $data );
}
}
add_action( 'wpmem_pre_register_data', 'sv_pre_register_update_data' );
add_action( 'wpmem_pre_update_data', 'sv_pre_register_update_data' );
解説
global $wpmem_themsgにはこれまでにプラグインで元々あるバリデーションを通ってエラーがあった場合、エラメッセージが格納されているグローバル変数になります。
調べてみると、ユーザー名・メールアドレス・パスワードのチェック、その他は必須のチェックが行われてました。
その段階でエラーがグローバル変数（$wpmem_themsg）に入ります。
で、そのエラーがない場合、独自関数sv_validate_user_dataを実行します。
sv_validate_user_dataで独自のバリデーションを作成します。
そこでエラーがあれば返ってくるのでそのエラーをグローバル変数（$wpmem_themsg）に格納します。
このフックの引数には登録・更新する前のユーザーデータが入っています。
バリデーションを作る
上記で説明したアクションフックで実行する関数を作成します。
function sv_validate_user_data( $data ) {
global $wpmem;
$fields = $wpmem->fields;
$error = false;
foreach( $data as $key => $value ) {
$label = $fields[$key]['label'];
switch( $key ) {
case 'sei_kana' :
case 'mei_kana' :
if( !preg_match( '/^[ァ-ヾ]+$/u', $value ) ) {
$error = $label.'はカタカナで入力してください。';
}
break;
case 'tel' :
if( !preg_match( '/^[0-9]+$/', $value ) ) {
$error = $label.'は半角数字で入力してください。';
}
break;
}
if( $error ) {
break;
}
}
return $error;
}
解説
global $wpmemでこのプラグインで設定されているデータのアレコレを取得します。
各項目のデータは$wpmem->fieldsでに入っているのでそれを$fieldsに格納しておきます。
エラーメッセージ格納用変数$errorを用意しておきます。
登録更新前のデータ$dataの中から任意の項目を比較し、エラーがあればエラーメッセージを設定って感じですね。
項目「セイ」の場合、$labelにセイ、$keyにsei_kanaという値が入ります。
キーに対応するラベルを取得し、エラーがあれば$label.’はカタカナで入力してください。のよう出力させます。
最後の
if( $error ) {
break;
}
ですが、foreachのループ中、1つでもエラーがあればそこでループを終了させます。
というのもこのプラグインのエラー表記は1つなのでそれに合わせました。
ユーザー名とメールアドレスにエラーがあってもユーザー名のエラーのみが表示されるんですよね。
自作の部分だけ複数表示もあれなんで1つにしときました。
brで繋げれば複数行表示も可能です。
結果
バリデーションがうまくいくとこんな感じで表示されます。
追加した項目以外にもusernameとかfirst_name、last_nameなんかのデフォルト値もバリデーションを追加できますので色々試してみてください。
例えばusernameは登録済みとか文字種別のチェックは行われますが文字数のチェックはないので、usernameは何文字以上とかいう設定を設けたい場合も追加できます。
ただ、注意点としてパスワードの文字数チェックはできません。
まぁできるといえばできるんですが、このやり方では無理ですしちょっと色々ややこしいので需要がありそうなら書いてみてもいいかも。
HTMLのinputの属性でチェック
もっと簡単にやろうと思えばinputのpattern属性を使う方法がります。
これはプラグインで対応できます。
カタカナにする場合
pattern属性は正規表現で設定する必要ばあります。下記のサイトを参考にしてみてください。
[HTML5]input pattern｜ひらがな・カタカナ・日本語をpatternであらわす正規表現 – TrippyBoyの愉快な日々
title属性に「カタカナで入力してください」などのテキストを書いておけば親切だと思います。
ただ！！このtitle属性に設定したテキストがiOSでは表示されないんですよね…
windowsやAndroidだと大丈夫なのに。
なんで面倒だけどバリデーション機能を作ったんですよ…ぶっちゃけpattern属性でできればそれでOKだったんですけどね…
windows
Android
iOS(iPad)
なんでじゃー！
- Category: Works , WordPress , Plugins
- Tag: WP-Members
