inputをkeyupしたら実行する関数をload時にも実行したい

Question

いつもお世話になっております。

現在、inputをkeyupしたら実行する関数があるのですが、
これをページを開いた際にも実行したいと思います。
inputは複数ある状態です。

現状のソースコード

    <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>
	<h3 class="bolder_h3">お客様情報</h3>
    <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="半角英数 (例：[e-mail])" 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">
$("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;
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>

Comments

[m.ts10806]

何が起きたのでしょうか。
> 思ったように動きませんでした。

[igaiga]

すみません。何も起きませんでした。

[m.ts10806]

あ、えっと。そのhoge()でconsole.log()書いて、コンソールを確認すると良いです。

[igaiga]

console.log(this);でみるとWindow {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}と入っていましたのでthisの値はなんかはいってるんだなーというくらいでしょうか。

[m.ts10806]

回答に動作確認方法例を追記しました。おそらくcosole.log()を設置する場所が違いそうです。

[igaiga]

すみません。タグがconsoleに表示されるようになりました。

Answer 1

予備知識として、半角区切りで１つのonで複数のイベントが登録可能です。

というより「ロード時に実行したい」のであれば、
むしろdocumentのロードですね。

あとkeyupの方はeachでまわさずとも下記で良いように思います。

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

動作確認方法例（デバッグ）：

function hoge(e){
  console.log(e);   
}

で、ブラウザのデベロッパーツールのコンソールに渡したinputの情報が出力されるタイミングを確認します。

Comments

[igaiga]

ありがとうございます。差し替えてみましたが動きませんでした。inputが複数あってもeachはいらないのでしょうか。

[m.ts10806]

jQueryのバージョンでしょうか。
私のほうでは3.3.1ですが、きちんとload,keyup共に動いています。
念のためhtml全体もご提示いただけると再現確認もしやすくなります。
this(動作が発生した自身)を利用するのでeachはむしろ不要と思います。

[igaiga]

すみません。タグが表示されるようになりました。

[m.ts10806]

「タグが表示」がコンソールであれば正しい動作です。

[igaiga]

ありがとうございます。一歩前進できました！
下記が現状のコードでしたが、そのままでも毎回load時に実行されていたようです。
-------------------------
$("select").each(function(){
$(this).on('change', hoge(this));
});
$("textarea,input").each(function(){
$(this).on('keyup', hoge(this));
});
-------------------------

以下のように変更しましたが、なぜか今まで動いていた部分も動きませんでした。
-------------------------
$("textarea,input").on("keyup",function(){
hoge(this);
});
$("select").on("change",function(){
hoge(this);
});

[m.ts10806]

再掲：
念のためhtml全体もご提示いただけると再現確認もしやすくなります。

もし、HTMLの記述よりも順番的に上に書かれているのでしたら下記で囲うか
$(function(){
});
</body>の直前におけば良いかと。

[igaiga]

すみません。HTMLを記載しました。
入力チェック済みの場合はclassが振られるようになっているのですが、back.historyで戻ったときに、再度チェックしてclassが振られるようにload時に全項目チェックさせたいという意図でした。

[m.ts10806]

確かhistory.backだとload動かないはずですね。
ブラウザ的には前のページの最後の状態に戻るのでloadも終わってる状態のはずです。

[igaiga]

動かないのも当たり前ですね。。。
$(this).on('pageshow', '.ui-content', hoge(this)); もだめですかね。。。
やってみたところ動かないですが。

[m.ts10806]

過去質問にもありますが、
https://teratail.com/questions/90103
ブラウザバックでロードイベントは諦めた方が良いかと。
基本的に、ブラウザバックは予期せぬ操作であるということで
動作保障をしないケースが多いです。
あくまでページ内のボタンやリンクで操作をしてくれということですね。

[igaiga]

そうなんですね。お付き合い頂きありがとうございました。

Answer 2

$(this).on('keyup', hoge(this)).trigger('keyup');

【jQueryのtrigger()でイベント処理を操作するまとめ！ | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/40012