Welcartのフリガナを必須＆カタカナのみ入力可にする方法【バリデーション】

公開日: 2024.04.23
最終更新日: 2026.07.17

WelcartでオンラインショップやWebサイトを制作するときのお話です。会員登録やお客様情報の入力フォームに「フリガナ」項目がありますが、デフォルトでは必須項目ではなく、未入力のままでもフォームを送信できてしまいます。

結論から言うと、functions.phpにWelcartのバリデーション用フィルターフックを追加することで、フリガナを必須項目にし、さらにカタカナのみ入力可能に制限できます。この記事では、そのコードを解説します。

1 フリガナを必須＆カタカナのみにする
2 必須を表すアスタリスク（*）を付ける
3 補足：ime-modeについて
4 まとめ

フリガナを必須＆カタカナのみにする

Welcartのフォームは、「会員登録・編集」「購入手続き」「別の配送先の指定」で入力箇所が分かれています。それぞれに対応するフィルターフックがあるので、必要な箇所にバリデーションを追加します。テーマのfunctions.phpに、以下のコードを記述していきます。

会員登録・編集ページのバリデーション

function ag_usces_filter_member_check($mes)
{
    $name3 = $_POST["member"]["name3"];
    $name4 = $_POST["member"]["name4"];

    // 未入力チェック
    if (WCUtils::is_blank($name3) && WCUtils::is_blank($name4)) {
        $mes .= "フリガナを入力してください。<br />";
    }
    // カタカナ入力チェック
    if (!preg_match("/^[ァ-ヾ]+$/u", $name3) || !preg_match("/^[ァ-ヾ]+$/u", $name4)) {
        $mes .= "フリガナはカタカナで入力してください。<br />";
    }

    return $mes;
}
add_filter('usces_filter_member_check', 'ag_usces_filter_member_check', 10);

購入手続きページのバリデーション

function ag_usces_filter_customer_check($mes)
{
    $name3 = $_POST["customer"]["name3"];
    $name4 = $_POST["customer"]["name4"];

    // 未入力チェック
    if (WCUtils::is_blank($name3) && WCUtils::is_blank($name4)) {
        $mes .= "フリガナを入力してください。<br />";
    }
    // カタカナ入力チェック
    if (!preg_match("/^[ァ-ヾ]+$/u", $name3) || !preg_match("/^[ァ-ヾ]+$/u", $name4)) {
        $mes .= "フリガナはカタカナで入力してください。<br />";
    }

    return $mes;
}
add_filter('usces_filter_customer_check', 'ag_usces_filter_customer_check', 10);
add_filter('usces_filter_member_check_fromcart', 'ag_usces_filter_customer_check', 10);

別の配送先を指定する場合のバリデーション

function ag_usces_filter_delivery_check($mes)
{
    $name3 = $_POST["delivery"]["name3"];
    $name4 = $_POST["delivery"]["name4"];

    if (isset($_POST['delivery']['delivery_flag']) && $_POST['delivery']['delivery_flag'] == 1) {

        // 未入力チェック
        if (WCUtils::is_blank($name3) && WCUtils::is_blank($name4)) {
            $mes .= "フリガナを入力してください。<br />";
        }
        // カタカナ入力チェック
        if (!preg_match("/^[ァ-ヾ]+$/u", $name3) || !preg_match("/^[ァ-ヾ]+$/u", $name4)) {
            $mes .= "フリガナはカタカナで入力してください。<br />";
        }
    }

    return $mes;
}
add_filter('usces_filter_delivery_check', 'ag_usces_filter_delivery_check', 10);

いずれも、姓（name3）・名（name4）のフリガナを取得し、未入力チェックとカタカナチェックを行っています。カタカナの判定には正規表現/^[ァ-ヾ]+$/uを使い、全角カタカナ以外が含まれていればエラーメッセージを追加します。別配送先は、「別の配送先を指定する」がオンのとき（delivery_flag == 1）だけチェックするようにしています。

必須を表すアスタリスク（*）を付ける

バリデーションを追加しただけでは、見た目上は必須か分かりません。フリガナ欄に「必須」を表すアスタリスク（*）を表示させます。同じくfunctions.phpに、次のコードを記述します。

function my_furigana_customer($furigana, $type, $values)
{
    $furigana =  '<tr class="inp1"><th scope="row"><em>' . __('*', 'usces') . '</em>' . usces_get_essential_mark('name3', $data) . 'フリガナ</th>';
    $furigana .= '<td>' . __('Familly name', 'usces') . '<input name="' . $type . '[name3]" id="name3" type="text" value="' . esc_attr($values['name3']) . '" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td>';
    $furigana .= '<td>' . __('Given name', 'usces') . '<input name="' . $type . '[name4]" id="name4" type="text" value="' . esc_attr($values['name4']) . '" onKeyDown="if (event.keyCode == 13) {return false;}" style="ime-mode: active" /></td>';
    $furigana .= '</tr>';
    return $furigana;
}
add_filter('usces_filter_furigana_form', 'my_furigana_customer', 10, 3);

これで、フリガナ欄に必須マークが表示され、必須＆カタカナのみのバリデーションが効くようになります。

3か所すべてに設定するのは、Welcartでは入力箇所（会員登録・購入手続き・別配送先）ごとに別々のフックが用意されているためです。導入したら、実際に各フォームから空欄・ひらがな・英字などで送信してみて、意図どおりにエラーが出るかを確認しておくと安心です。

補足：ime-modeについて

上のコードにあるstyle="ime-mode: active"は、入力時にIME（かな入力）を自動でオンにする指定です。ただしime-modeは現在では非推奨で、多くのブラウザでサポートされなくなっています。カタカナ入力を促したい場合は、ime-modeに頼りきらず、入力後にJavaScriptでカタカナへ自動変換するといった対応も検討するとよいでしょう。今回のサーバー側バリデーションと組み合わせれば、より確実にカタカナ入力を担保できます。