javascriptのみでのフォームリアルタイムチェック

Question

前提条件

規定でjQueryのリアルタイムチェックは使用不可です。
こちらのサイトを参考にリアルタイムチェックのjsを設置しました。
https://liberty-dock.com/business_post/js%E3%81%A7%E3%83%A1%E3%83%BC%E3%83%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%81%AE%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%90%E3%83%AA%E3%83%87%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3/

やりたいこと、問題

最初からエラーメッセージを表示し、入力するとエラーが外れます。
コードは下記ですが、ラジオボタンはクリックすると反応しますが、
テキストボックスは文字を入力しても反応しません。
どこに問題があるのか教えていただければ助かります。

<div class="err_01">
<p>お名前<span>必須</span></p>
<p class="error on">お名前をご入力ください！</p>
<input value="" type="text" name="textbox1">
</div>

<div class="err_02">
<p>ふりがな<span>必須</span></p>
<p class="error on">ふりがなをご入力ください！</p>
<input value="" type="text" name="textbox2">
</div>

<div class="err_03">
<p>プレゼントを選んでください<span>必須</span></p>
<p class="error on">プレゼントをお選びください！</p>
<label for="radio1_0"><input name="radio1" type="radio" id="radio1_0" value="0"></label>
<label for="radio1_1"><input name="radio1" type="radio" id="radio1_1" value="1"></label>
<label for="radio1_2"><input name="radio1" type="radio" id="radio1_2" value="2"></label>
</div>

.error{display:none;}
.on{
display:inline-block;
position:relative;
background:red;
padding:15px;
text-align:center;
color:white;
-webkit-border-radius:3px;
-moz-border-radius:3px;
margin:3px;
}
.on:after{/*ふきだし*/
border: solid transparent;
content:'';
height:0;
width:0;
pointer-events:none;
position:absolute;
border-color:red;
border-top-width:10px;
border-bottom-width:10px;
border-left-width:10px;
border-right-width:10px;
margin-left: -10px;
border-top-color:#red;
top:100%;
left:12%;
}

//お名前
function text_require01(_this) {
	if(_this.val().length > 200 || _this.val() == ''){
		_this.next('.error').addClass('on');
	} else {
		_this.next('.error').removeClass('on');	
	}
}

//ふりがな（実際はふりがなではないため、カタカナのみなどの判定はいりません）
function text_require02(_this) {
	if(_this.val().length > 200 || _this.val() == ''){
		_this.next('.error').addClass('on');
	} else {
		_this.next('.error').removeClass('on');	
	}
}
//プレゼント
function radio_require01(_this) {
	var check_require = _this.parents('.err_03').find('input[type="radio"]:checked').length
	if(check_require > 0){
		_this.parents('.err_03').children('.error').removeClass('on');
	} else {
		_this.parents('.err_03').children('.error').addClass('on');
	}
}
//各種関数のまとめ
function batch_execution() {
	text_require01($(".err_01 input[type=text]"));
	text_require02($(".err_02 input[type=text]"));
	radio_require01($(".err_03 input[type=radio]"));
}
//バリデーションの実行タイミング
$(function(){
$('.err_01 input[type="text"]').blur(function(){
text_require01($(this));
});
$('.err_02 input[type="text"]').blur(function(){
text_require02($(this));
});
$('.err_03 input[type="radio"]').on('change', function(){
radio_require01($(this));
});
});

Answer 1

回答になるかどうかわかりませんが、参考までに。
HTMLを工夫すればJavaScriptなしでも可能です。

• 入力の有無は required 属性、200文字チェックは pattern 属性(またはmaxlength属性)を利用可能。requiredやpatternのような制約条件を満たさない状態では :invalid擬似クラスセレクタにマッチします。
• 「:invalid に続く .error」というセレクタを使うために、<p class="error">を<input>の後に移動する
• 「:invalidを含むlabel に続く .error」というセレクタは現在書けないので、ラジオボタンの :invalid 状態を<fieldset>に伝播させてやる

<div class="err_01">
<p>お名前<span>必須</span></p>
<input value="" type="text" name="textbox1" required pattern=".{1,200}">
<p class="error">お名前をご入力ください！</p>
</div>

<div class="err_02">
<p>ふりがな<span>必須</span></p>
<input value="" type="text" name="textbox2" required pattern=".{1,200}">
<p class="error">ふりがなをご入力ください！</p>
</div>

<div class="err_03">
<p>プレゼントを選んでください<span>必須</span></p>
<fieldset> <!-- ラジオボタンの :invalid を受け継ぐ -->
<label for="radio1_0"><input name="radio1" type="radio" id="radio1_0" value="0" required></label>
<label for="radio1_1"><input name="radio1" type="radio" id="radio1_1" value="1"></label>
<label for="radio1_2"><input name="radio1" type="radio" id="radio1_2" value="2"></label>
</fieldset>
<p class="error">プレゼントをお選びください！</p>
</div>

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
.error {
  display: none;
}
:invalid ~ .error { /*.onのかわり */
  ...
}
:invalid ~ .error::after {/*ふきだし*/
  ...
}

Comments

[halhalYam]

お礼が遅くなりすみません、ご回答ありがとうございます。
JavaScript無しでも似たような事が出来るんですね！
もっと勉強が必要だと実感しました。

Answer 2

document.addEventListener('input',e=>{
  document.querySelectorAll('.error').forEach(x=>{
    let n;
    if(n=x.closest('div').querySelector('input[type=text]')){
      x.classList.toggle('on',n.value=="");
    }
    if(x.closest('div').querySelector('input[type=radio]:checked')){
      x.classList.remove('on');
    }
  });
});

.error:not(.on){display:none;}

Comments

[halhalYam]

お礼が遅くなりすみません、ご回答ありがとうございます。
少ない記述で同じことが再現出来ていて、変更も簡単にでき非常に助かりました。
JavaScript、奥が深いです