WordPressでお問い合わせを作るときの定番プラグインだった「MW WP Form」。 開発が終了した今でも仕様的に必要で使ったり、過去に制作したサイトの修正で触ったりとなんだかんだまだ使う頻度が高いプラグインでもあります。
その中で先日、エラーメッセージのカスタマイズを久しぶりにしたところちょっと苦戦しまして…。 まだまだ使うこともあるということで、エラーメッセージのカスタマイズ方法をまとめておきたいと思います。
エラーメッセージのカスタマイズ方法
エラーメッセージをカスタマイズするには、テーマの functions.php
ファイルに以下のコードを追加します。
function custom_validation_messages($validation) {
$validation->set_rule(
'フィールド名',
'バリデーションルール',
array(
'message' => '表示したいエラーメッセージ',
)
);
return $validation;
}
add_filter('mwform_validation_mw-wp-form-フォーム識別子', 'custom_validation_messages');
- フィールド名: バリデーションを適用するフィールドの
name
属性の値を指定します。 - バリデーションルール: 適用するバリデーションルールを指定します(例:
noEmpty
、numeric
など)。 - フォーム識別子: 対象となるフォームの識別子を指定します。
例えば、メールアドレスのフィールドが未入力の場合に「メールアドレスを入力してください」というメッセージを表示させたい場合、以下のように記述します。
function custom_validation_messages($validation) {
$validation->set_rule(
'email',
'noempty',
array(
'message' => 'メールアドレスを入力してください',
)
);
return $validation;
}
add_filter('mwform_validation_mw-wp-form-フォーム識別子', 'custom_validation_messages');
エラーメッセージの表示位置のカスタマイズ
エラーメッセージの表示位置をカスタマイズするには、フォームのショートコード内で show_error=”false” を設定し、任意の位置に [mwform_error keys=”フィールド名”] を挿入します。
<label>お名前</label>
[mwform_text name="name" size="60" show_error="false"]
[mwform_error keys="name"]
<label>メールアドレス</label>
[mwform_text name="email" size="60" show_error="false"]
[mwform_error keys="email"]
バリデーションルールの一覧
MW WP Formでは、以下のようなバリデーションルールが用意されています。
名称 | 対応名 | 引数 | 内容 |
---|---|---|---|
必須項目 | noEmpty | 必須項目のチェック | |
必須項目(チェックボックス) | required | チェックボックス・ラジオボタンの必須項目のチェック | |
半角数字 | numeric | 半角数字のみ許可 | |
半角英字 | alpha | 半角英字のみ許可 | |
半角英数字 | alphaNumeric | 半角英数字のみ許可 | |
カタカナ | katakana | カタカナのみ許可、「ー(長音)」も許可 | |
ひらがな | hiragana | ひらがなのみ許可、「ー(長音)」は拒否 | |
ひらがな または カタカナ | kana | ||
郵便番号 | zip | 日本の郵便番号の形式かをチェック | |
電話番号 | tel | 電話番号の形式をチェック、電話番号の形式はハイフンと+なしなら国番号付きも可能 | |
メールアドレス | メールアドレスの形式をチェック | ||
日付 | date | 日付の形式をチェック | |
日付(年月) | month | 日付の年月で形式をチェック | |
URL | url | URLの形式をチェック(httpかhttpsで始まっているか否か) | |
一致する項目 | eq | target(文字列:他のname) | 他のフィールドと値が一致するかをチェック |
文字数の範囲 | between | min(整数値:最小文字数), max(整数値:最大文字数) | 文字数が指定した範囲内かをチェック |
最小文字数 | minLength | min(整数値:最小文字数) | |
拡張子制限 | fileType | types(文字列:拡張子をカンマ区切りで) | jpg,pngなどで制御、「.」は不要 |
サイズ制限 | fileSize | bytes(整数値:最大ファイル数をバイト単位で) | |
最大画像サイズ | maximagesize | width(整数値:横幅をpx単位), height(整数値:縦幅をpx単位) | |
最小画像サイズ | minimagesize | width(整数値:横幅をpx単位), height(整数値:縦幅をpx単位) | |
in | options(1次元配列) | optionsで渡された配列に一致する項目がない場合にエラーを返す、セレクト、ラジオ、チェックの強化用 | |
noFalse | 値がセットされていても0の場合は許さない |
バリデーションルールを使用して、実際に諸々の項目を設定すると下記のようになります。
function my_custom_validations($validation) {
// ラジオボタンの必須チェック
$validation->set_rule(
'radio_option',
'required',
array(
'message' => 'いずれかのオプションを選択してください。',
)
);
// パスワードの必須チェック
$validation->set_rule(
'password_field',
'noEmpty',
array(
'message' => 'パスワードを入力してください。',
)
);
// パスワードの最小文字数チェック
$validation->set_rule(
'password_field',
'minLength',
array(
'min' => 8,
'message' => 'パスワードは8文字以上で入力してください。',
)
);
return $validation;
}
add_filter('mwform_validation_mw-wp-form-123', 'my_custom_validations');
MW WP Formのエラーメッセージをカスタマイズすることで、ユーザーにとってより親切なフォームを作成できます。
使用頻度は少なくなってきたプラグインではありますが、使用する際にはぜひ細かいところまでカスタマイズしてみてください。