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

前提・実現したいこと

フォームのバリデーションをするためにリアルタイムにテキストエリアの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>

x_x

2018/12/20 06:41

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

igaiga

2018/12/20 07:33

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

kei344

2018/12/20 08:10

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

行動規範の内容に同意します

回答2件

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

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

javascript
1//参照するとき
2console.log($.cookie("hoge"));
3//セットするとき
4$.cookie("hoge",123);
5//削除するとき
6$.removeCookie("hoge");

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

投稿2018/12/20 06:37

yambejp

総合スコア114767

igaiga

2018/12/20 07:51

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

行動規範の内容に同意します

ベストアンサー

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

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

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

投稿2018/12/20 06:48

Lhankor_Mhy

総合スコア36074

igaiga

2018/12/20 07:47

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