質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.64%

リアルタイム+クッキーがある場合にテキストエリアのvalue値を取得する

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 538

igaiga

score 139

前提・実現したいこと

フォームのバリデーションをするためにリアルタイムにテキストエリアのvalue値を取得するというところまではできたのですが、クッキーに値があった場合にも同様に動かしたいと思いました。
クッキーは確認画面からhistory.backで戻ってきた場合に判別して再度value値を取得するために使っています。

クッキーを取得してfunction hoge(elm)のところまでは動いているようなのですが、
その中身のreturn function()の部分が動かないようです。
アドバイスいただけると助かります。

該当のソースコード

  <form id="contact-form" action="./check.php" method="post" data-validate>
    <dl class="relative input_set">
        <dt><label for="name">ご相談内容</label></dt>
        <dd><textarea cols="40" rows="8" name="message" id="message" class="voluntary"></textarea><span class="option"></span></dd>
    </dl>
    <dl class="relative input_set">
        <dt><label for="name">お名前</label></dt>
        <dd>
            <input type="text" name="name" id="name" value="" placeholder="太郎" class="necessary v_required" required>
            <span class="required"></span>
        </dd>
    </dl>
    <dl class="relative input_set">
        <dt><label for="name">メールアドレス</label></dt>
        <dd>
            <input type="text" name="mail" id="mail" value="" placeholder="半角英数 (例:info@example.com)" class="necessary v_mail" required>
            <span class="required"></span>
        </dd>
    </dl>
    <dl class="relative input_set">
        <dt><label for="name" required>電話番号</label></dt>
        <dd>
            <input type="text" name="tel" id="tel" value="" class="necessary v_phone" required>
            <span class="required" required></span>
        </dd>
    </dl>
    <div class="btn">
        <button type="submit" data-icon="check" class="form_btn"  id="send_button">入力内容のご確認</button>
    </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var c_val = cookieVal('check');
  // クッキー取得
function cookieVal(key){
  return ((document.cookie + ';').match(key + '=([^¥S;]*)')||[])[1];
}
if(c_val == "true"){
    $("select").each(function(){
    hoge(this);
    });
    $("textarea,input").each(function(){
    hoge(this);
    });
};

$("select").each(function(){
$(this).on('change', hoge(this));
});
$("textarea,input").each(function(){
$(this).on('keyup', hoge(this));
});

var str;
var required;
var voluntary;
function hoge(elm){
var v, old = elm.value;
                console.log(elm);
return function(){
if(old != (v=elm.value)){
old = v;
str = $(this).val();
required = $(this).hasClass('v_required');
required = $(this).hasClass('v_required');
required = $(this).hasClass('v_required');
voluntary = $(this).hasClass('voluntary');
v_email = $(this).hasClass('v_mail');
v_phone = $(this).hasClass('v_phone');
var reg_email = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/;
var reg_phone = /^(0{1}\d{1,4}-{0,1}\d{1,4}-{0,1}\d{4})$/;
    if(required == true){
        if(str == ""){
            $(this).removeClass("inputOk");
            $(this).addClass("inputError");
            $(this).before('<div class="add">必須項目です</div>');
        } else {
            $(this).addClass("inputOk");
            $(this).removeClass("inputError");
            $(this).prev().remove();
        }
    }else if(voluntary == true){
        if(str == ""){
            $(this).removeClass("optionOk");
        } else {
            $(this).addClass("optionOk");
        }
    }else if(v_email == true){
        if(str == ""){
            $(this).removeClass("inputOk");
            $(this).addClass("inputError");
            $(this).prev(".add").remove();
            $(this).before('<div class="add">必須項目です</div>');
        }else if(reg_email.test(str)){
            $(this).addClass("inputOk");
            $(this).removeClass("inputError");
            $(this).prev(".add").remove();
        } else {
            $(this).removeClass("inputOk");
            $(this).removeClass("inputError");
            $(this).prev(".add").remove();
            $(this).before('<div class="add">半角数字とハイフンのみご利用できます</div>');
        }
    }else if(v_phone == true){
        if(str == ""){
            $(this).removeClass("inputOk");
            $(this).addClass("inputError");
            $(this).prev(".add").remove();
            $(this).before('<div class="add">必須項目です</div>');
        } else if(reg_phone.test(str)) {
            $(this).addClass("inputOk");
            $(this).removeClass("inputError");
            $(this).prev(".add").remove();
        } else {
            $(this).removeClass("inputOk");
            $(this).removeClass("inputError");
            $(this).prev(".add").remove();
            $(this).before('<div class="add">半角数字とハイフンのみご利用できます</div>');
        }
    }
}
}
}

</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/12/20 15:41

    return function()のところで何がしたいのか説明願えますか?

    キャンセル

  • igaiga

    2018/12/20 16:33

    すみません。参考サイト見て作ったのでそのまま流用しましたので分からないです。
    http://www.kaasan.info/archives/1676
    いらなそうだなーと思ったのですが、取ると動かないのでそのままにしています。

    キャンセル

  • kei344

    2018/12/20 17:10

    まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

    キャンセル

回答 2

+2

jsのクッキーは処理が面倒なので「jquery.cookie.js」を利用するとよいでしょう

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
//参照するとき
console.log($.cookie("hoge"));
//セットするとき
$.cookie("hoge",123);
//削除するとき
$.removeCookie("hoge");

あと、なんでもかんでも質問文に載せすぎていて質問内容がぶれます
簡潔に問題になっている箇所と機能を絞って課題を質問して下さい

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/20 16:51

    失礼いたしました。
    クッキーは取得できているのですが、どこが分からないのか分からない状態で質問してしまいました。。。

    キャンセル

checkベストアンサー

+1

hoge関数は関数を返すので、呼び出すコードが必要になるかと思いますが、クッキーからのコードにはその部分がないことが原因です。

解決方法は、hoge関数の戻り値をコールすることです。

    $("select").each(function(){
    hoge(this).bind(this)();  //念のため this を束縛しました。
    });

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/20 16:47

    ありがとうございます!!!
    return function()は突破できたのですがif(old != (v=elm.value))で止まってしまうので、
    if(old != (v=elm.value)|c_val == "true")としたところイメージ通りに動きました。
    return function()が何しているのか、わからないままですが^^; 精進します。

    キャンセル

  • 2018/12/20 17:07

    それについてはそれほど難しい概念ではないです。「第一級関数」で調べてみるといいかもしれませんね。
    ↓ここはわかりやすいかもしれません。
    http://maeharin.hatenablog.com/entry/20130308/javascript_function_ninjya

    キャンセル

  • 2018/12/20 18:36

    ありがとうございます!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る