サポート » プラグイン » contact form 7で入力値チェック

  • contact form 7、便利に利用させていただいております。
    さて、実際のサイトで使用していて思うのが、フォームの値チェックについてです。

    例えば、「電話番号」や「郵便番号」などテキスト項目の数値のみか否かのチェック、「氏名カナ」テキスト項目などのカナのみの値チェックなどです。Javascriptを用いたフォームの入力値チェックは、様々なものがあります。

    例: http://www.simplexsimple.com/archives/2007/02/javascriptvalidatejs.html

    このような入力値チェックを、どうcontact form 7に組み込めば良いのか、何か良い方法はありませんでしょうか?

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • モデレーター Takayuki Miyoshi

    (@takayukister)

    標準インストールの Contact Form 7 ではそれらの入力値チェックは行いません。

    ご自分でコードを改変して対応される場合は modules/text.php の validation filter のあたりを見ると参考になるかもしれません。

    トピック投稿者 9steps

    (@9steps)

    ご返信、ありがとうございます。validation filter、チェックしてみます。

    テキスト項目タグに正規表現オプションを追加できるようにして、バリデーションできるような仕組みを作れると理想的かなと考えています。

    例:
    [text* zipcode 7/7 class:required regex:/^[0-9]/]

    トピック投稿者 9steps

    (@9steps)

    takayukisterさんのレスをヒントに、次の環境でcontact form 7 でtext項目を正規表現を用いてバリデーションが行えるようにハックしてみました。

    [テスト環境]
    WordPress 2.9.1
    contact form 7 Version: 2.1.1
    UTF-8環境

    ◆ 手順1

    contact-form-7/includes/shortcodes.php の103行目あたり

    $pattern = '%^([-0-9a-zA-Z:.#_/|\s]*?)((?:\s*"[^"]*"|\s*\'[^\']*\')*)$%';

    を以下に変更する。正規表現のメタ文字を追加できるようにするため。

    $pattern = '%^([-0-9a-zA-Z:.#_/|\s\*\?\+\^\$\"\{\}\(\)]*?)((?:\s*"[^"]*"|\s*\'[^\']*\')*)$%';

    ◆ 手順2

    contact-form-7/modules/text.php の73行目あたり

    $value = $values[0];

    を以下に変更する。Contact Form 7のタグ内に正規表現を記述できるようにするため。

    foreach( $values as $item ){
        if ( !preg_match("/^(regex:).*/", $item) && !preg_match("/^(!regex:).*/", $item) && !preg_match("/^(regexmsg:).*/", $item) )
        {
            $value = $item;
        }
    }

    ◆ 手順3

    contact-form-7/modules/text.php の120行目あたり

    if ( 'email' == $type || 'email*' == $type ) {
        if ( 'email*' == $type && '' == $_POST[$name] ) {
            $result['valid'] = false;
            $result['reason'][$name] = $wpcf7_contact_form->message( 'invalid_required' );
        } elseif ( '' != $_POST[$name] && ! is_email( $_POST[$name] ) ) {
            $result['valid'] = false;
            $result['reason'][$name] = $wpcf7_contact_form->message( 'invalid_email' );
        }
    }
    
    return $result;

    の「return $result;」前に以下のコードを追加する。

    $values = $tag['values'];
    $regex = "";
    
    foreach( $values as $item ){
        if ( preg_match("/^regex:.*/", $item)  ) {
            $regex["matchflg"] = TRUE;
            $regex["regex"] = str_replace("regex:", "", $item);
        } else if ( preg_match("/^!regex:.*/", $item)  ) {
            $regex["matchflg"] = FALSE;
            $regex["regex"] = str_replace("!regex:", "", $item);
        } else if ( preg_match("/^regexmsg:.*/", $item) ) {
            $regex["regexmsg"] = str_replace("regexmsg:", "", $item);
        }
    }
    
    if ( ('text*' == $type || 'text' == $type) && !empty($_POST[$name]) && isset($regex["regex"]) ) {
    
        $pattern = str_replace("#{", "[", $regex["regex"]);
        $pattern = str_replace("}#", "]", $pattern);
        $pattern = str_replace("%", "|", $pattern);
        $pattern .= "u"; // for UTF-8
    
        if ( $regex["regexmsg"] == "" ) {
            $regex["regexmsg"] = "There are input errors.";
        }
    
        if ( $regex["matchflg"] == TRUE ) {
            if ( preg_match("$pattern", $_POST[$name]) ) {
                $result['valid'] = false;
                $result['reason'][$name] = $regex["regexmsg"];
            }
        }else{
            if ( !preg_match("$pattern", $_POST[$name]) ) {
                $result['valid'] = false;
                $result['reason'][$name] = $regex["regexmsg"];
            }
        }
    }
    
    // この上にコードを追加する
    return $result;

    以上の3つの手順に従い変更を行います。

    次にContact Form 7の編集画面から正規表現を加えた形でタグを作成していきます。デリミタなどの都合上、通常の正規表現の記述法とは少し違いがあります。

    ◆ タグ記述ルール1

    「”regex:/正規表現/”」のような形式で、ダブルクオーテーションとスラッシュで囲み正規表現を記述します。

    [text* name01 "regex:/正規表現/"]

    ◆ タグ記述ルール2
    正規表現に一致する場合にエラーでは「regex:」、一致しない場合にエラーでは「!regex:」と記述する

    [text* name01 "regex:/正規表現/"]
    [text* name01 "!regex:/正規表現/"]

    ◆ タグ記述ルール3
    「[」と「]」は、Contact Form 7自体のタグのデリミタとして使用するため、代わりに「#{」と「}#」を用いる。

    例:/[0-9]/ の場合 →
    [text* num01 "regex:/#{0-9}#/"]

    ◆ タグ記述ルール4
    「|(or)」は、Contact Form 7内でタグのデリミタとして使用されているため、代わりに「%」を用いる。

    例:/(NEC|日本電気)/ の場合 →
    [text* denkicompany "!regex:/(NEC%日本電気)/"]

    ◆ タグ記述ルール5
    正規表現に一致した際のエラーメッセージは「regexmsg:」を用いて記述する。

    [text* nonum01 "!regex:/#{0-9}#/" "regexmsg:半角数字以外を入力してください"]

    「regexmsg:」が指定されていない場合、”There are input errors.”と表示される。

    ◆ タグ記述ルール6
    「\」はContact Form 7内でstripcslashesで取り除かれてしまうため、「\\」と記述してクォートする。

    例:/^\d{3}$/ の場合 →
    [text* 3nums "!regex:/^\\d{3}$/"]

    実際のタグ入力例:

    お名前(半角カナ不可) [text* name01 20/20 "お名前nameナマエ" "regex:/#{ア-ン゙゚}#/" "regexmsg:半角カナは不可"]
    文字列(全角文字のみ可)[text* test01 "全角hankakuカナ" "regex:/(?:\\xEF\\xBD#{\\xA1-\\xBF}#%\\xEF\\xBE#{\\x80-\\x9F}#)%#{\\x20-\\x7E}#/" "regexmsg:全角文字のみ可です"]
    文字列(半角数字以外可) [text* test02 "テスト1234" "regex:/\\d+/" "regexmsg:半角数字以外可です"]
    文字列(半角数字のみ可) [text* test03 "全角数字12345" "regex:/#{^\\d+}#/" "regexmsg:半角数字のみ可です"]
    半角3桁の数字のみ可 [text* test04 "0124" "!regex:/^\\d{3}$/" "regexmsg:半角3桁の数字のみ可です"]
    郵便番号 [text* zipcode "1234-0000" "!regex:/^\\d{3}-\\d{4}$/" "regexmsg:123-0001のように入力してください"]
    電話番号 [text* tel "AA-BBBB-CCCC" "!regex:/^0\\d{1,5}-\\d{0,4}-?\\d{4}$/" "regexmsg:電話番号を半角数字で03-1234-5678のようにハイフンで区切って入力して下さい"]

    以上です。

    手元でそれほど長くない正規表現でテストしてみただけなので、デリミタなどの扱いによって上手く動かない正規表現があるかもしれません。

    また、できればContact Form 7編集画面の「タグの作成」から正規表現を記述できるようにして、デリミタなどの必要な変更をプログラム側で自動的に行うにすると良いのかもしれませんが、今回のハックではそこまでは踏み込みませんでした。

    こちらを参考に、「半角スペース」の入力のみ不可、
    というようにしてみたいのですが、可能でしょうか。

    よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「contact form 7で入力値チェック」には新たに返信することはできません。