はじめに

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);

「フリガナ」入力項目に「必須」を表すのアスタリスク（*）をつける

同じくテーマの 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);

これで「フリガナ」項目を必須項目にして、カタカナのみのバリデーションルールを設定することができました。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。