チェックを解除した時に再びバリデーションを行う方法

Question

前提・実現したいこと

HTMLでチェックボックス、プルダウンメニュー、ラジオボタン、テキストボックスを使ったフォーム(フォームタグで括られていない)を作り、
Javascriptを用いてバリデーションを行い、エラーがあれば.html()でそのメッセージを出力しようとしています。
出力するメッセージはhtmlのタグになっており、出力する場所はdiv要素とid属性で用意されています。
現時点ではエラーが発見されたらメッセージは表示され、解決されたら消えるようになっています。

発生している問題・エラーメッセージ

全てにおいて選択肢が変更された際に値は反映されますが
値がなくなった時「値が存在しません」と出ません。
これは、「正しい値を最初に入れた時はエラーメッセージは出ずid属性のあるdivタグのみが出力されるがその後仮に値が無くなった(チェックボックスの全てのチェック解除など)があった時に本来『何も入っていない』というエラーを出すべきなのに出ない」
という意味です。
また、可能な限り全てのIDについて記載することは避けたいと思っています。

該当のソースコード

function valid($a) {
	$error="<div id=\"a_valid\"></div>";
	if (!$a) {
		$error = "<div id=\"a_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
	}else if (($a != "a") && ($a != "b") && ($a != "c")) {
        $error = "<div id=\"a_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
    }
  return $error;
}

function valid_echo($a)
{
  $a_echo ="";
  $ans={"a":"A","b":"B","c":"C"};
  $error_message = valid($a);
  if ($error_message==="<div id=\"a_valid\"></div>") {
    $a_echo = $ans[$a];
  }
    return $a_echo;
 }

function valid_b($b){
  $error_b="<div id=\"b_valid\"></div>";
  $b2 =[/*配列の中身*/];
    if ($b===[]) {
        $error_b = "<div id=\"b_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
      }else{
        for ($i = 0; $i <$b.length ; $i++) {
          if (((parseInt($b[$i])<0||parseInt($b[$i])>($b2).length-1)||!Number.isInteger(parseInt($b[$i]))||!Array.isArray($b))&&parseInt($b[$i])==$b[$i]) {
            $error_b = "<div id=\"b_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
            break;
          }
        }
      }
      return $error_b;
}

function valid_b_echo($b)
{
  var $b_echo = "";
  $error_message = valid_b($b);
  $b2 =[/*配列の中身*/];
    var $array= new Array();
  if ($error_message==="<div id=\"b_valid\"></div>") {
  for(var i=0;i<$b.length;i++){
    if($b[i].checked){
      if($b_echo!=="") $b_echo+=",";
      $b_echo+=$b2[parseInt($b[i].value)];
    }
  };
  }
      return $b_echo;
}

function valid_c($c)
{
      $error_c="<div id=\"c_valid\"></div>";
        if ((!$c&&$c!=0)) {
        $error_c = "<div id=\"c_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
    } else if ((parseInt($c)<0||parseInt($c)>10)&&!Number.isInteger($c)) {
        $error_c = "<div id=\"c_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
    }
  return $error_c;
}

function valid_d($d)
{
  $error_d="<div id=\"d_valid\"></div>";
        if ((!$d&&$d!=0)) {
        $error_d = "<div id=\"d_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
    } else if ((parseInt($d)<0||parseInt($d)>9)&&!Number.isInteger($d)) {
        $error_d = "<div id=\"d_valid\"><p style=\"color:#ff2800;\">"+"不正なPOSTです。"+"</p></div>";
    }
    return $error_d;
}
$(function(){
       $("#a input").change(function(){
        $gender=$("#a input:checked").val();
        $('div #a_valid').html(valid_a($a));
        $error_a_=valid_a($a);
        $a_echo_=valid_a_echo($a);
        //console.log(valid_gender($gender));
        //console.log(valid_gender_echo($gender));
        //console.log($gender);
        //alert($gender);
      });

      $("#b input").change(function(){
        ary=document.getElementsByName('b');
        var ary2=$('#b input:checked').map(function() {
            return $(this).val();
        }).get();
        $b=new Array();
        if (ary.length>1) {
          for (var i = 0; i <ary.length; i++) {
            $b.push(ary[i]);
          }
        }
        $error_b_=valid_b($b);
        $b_echo_=valid_b_echo($b);
        console.log(ary2);
        $('div #b_valid').html(valid_b($b));
        console.log($error_b_);
        console.log($b_echo_);
      });

      $("#c").change(function(){
        $c=$("#c option:selected").val();
        $d=$("#d option:selected").val();
        $('div #c_valid').html(valid_c($c));
        $error_c_=valid_c($c);
        //console.log(valid_c($c));
        //console.log($c);
      });
      $("#d").change(function(){
        $c=$("#c option:selected").val();
        $d=$("#d option:selected").val();
        $('div #d_valid').html(valid_d($d));
        $error_d_=valid_d($d);
        //console.log(valid_d($d));
        //console.log($d);
      });
});

<p>
  <input type="radio" name="a" value="a" id="a"><label for="a">A</label>
  <input type="radio" name="a" value="b" id="b"><label for="b">B</label>
  <input type="radio" name="a" value="c" id="c"><label for="c">C</label>
</p>
</div>

<div id="b_valid"></div>
<div id="b">
<p>
  <input type="checkbox" name="b" value="0" id="b0"><label for="b0">b0</label><br><br>
  <input type="checkbox" name="b" value="1" id="b1"><label for="b1">b1</label><br><br>
  <input type="checkbox" name="b" value="2" id="b2"><label for="b2">b2</label><br><br>
  <input type="checkbox" name="b" value="3" id="b3"><label for="b3">b3</label><br><br>
  <input type="checkbox" name="b" value="4" id="b4"><label for="b4">b4</label><br><br>
  <input type="checkbox" name="b" value="5" id="b5"><label for="b5">b5</label><br><br>
  <input type="checkbox" name="b" value="6" id="b6"><label for="b6">b6</label><br><br>
  <input type="checkbox" name="b" value="7" id="b7"><label for="b7">b7</label><br><br>
  <input type="checkbox" name="b" value="8" id="b8"><label for="b8">b8</label><br><br>
  <input type="checkbox" name="b" value="9" id="b9"><label for="b9">b9</label><br><br>
  <input type="checkbox" name="b" value="10" id="b10"><label for="b10">b10</label><br><br>
  <input type="checkbox" name="b" value="11" id="b11"><label for="b11">b11</label><br><br>
  <input type="checkbox" name="b" value="12" id="b12"><label for="b12">b12</label><br><br>
  <input type="checkbox" name="b" value="13" id="b13"><label for="b13">b13</label><br><br>
  <input type="checkbox" name="b" value="14" id="b14"><label for="b14">b14</label><br><br>
  <input type="checkbox" name="b" value="15" id="b15"><label for="b15">b15</label><br><br>
  <input type="checkbox" name="b" value="16" id="b16"><label for="b16">b16</label><br><br>
  <input type="checkbox" name="b" value="17" id="b17"><label for="b17">b17</label><br><br>
  <input type="checkbox" name="b" value="18" id="b18"><label for="b18">b18</label><br><br>
  <input type="checkbox" name="b" value="19" id="b19"><label for="b19">b19</label><br><br>
  <input type="checkbox" name="b" value="20" id="b20"><label for="b20">b20</label><br><br>
  <input type="checkbox" name="b" value="21" id="b21"><label for="b21">b21</label><br><br>
  <input type="checkbox" name="b" value="22" id="b22"><label for="b22">b22</label><br><br>
</p>
</div>
<br><br>

<div id="c_valid"></div>
<div id="d_valid"></div>

<p>
  <select name="c" id="c">
          <option selected disabled></option>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
        </select>
  <select name="d" id="d">
          <option selected disabled></option>
          <option value="0">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          </select></p>

補足情報（FW/ツールのバージョンなど）

フレームワークは不使用です

Comments

[x_x]

提示コード中に「値が存在しません」がありませんが、どこで出力しようとしているのでしょうか？

[penginer]

変更しました

Answer 1

「本来『何も入っていない』というエラーを出すべき」とありますが、これは

function valid_b($b){
  $error_b="<div id=\"b_valid\"></div>";
  $b2 =[/*配列の中身*/];
    if ($b===[]) {
        $error_b = "<div id=\"b_valid\"><p style=\"color:#ff2800;\">"+"入力されていません。"+"</p></div>";
      }else{
//...

このifブロックに入らない、ということだと理解しました。

まず、$b===[]ですが、javascriptでは配列に比較演算子は使えません。たとえば、[] == []はfalseです。
解決法ですが、空配列かどうかは、lengthプロパティをチェックしてください。

また、このvalid_b関数の呼び出し部分を見ると、

      $("#b input").change(function(){
        ary=document.getElementsByName('b');
        
        //...
        
        $b=new Array();
        if (ary.length>1) {
          for (var i = 0; i <ary.length; i++) {
            $b.push(ary[i]);
          }
        }
        $error_b_=valid_b($b);
        
        //...
        
      });

となっています。$bはdocument.getElementsByName('b')を配列化したものですから、チェックボックスの状態に関わらず<input name="b">の全ての要素が入った配列です。
なので、$bが空配列になることはありません。
解決法ですが、jQueryを使っているようなので、ary=$('[name=b]:checked');のようにすればいいでしょう。

最後に、

        $('div #b_valid').html(valid_b($b));

ですが、半角スペースの区切りは「子孫セレクタ」とみなされます。
子孫セレクタ－スタイルシートリファレンス
解決法ですが、セレクタは正しく書きましょう。

以上です。

Answer 2

これってそれぞれの要素のエラーメッセージ表示のイベント発火タイミングってどうなってます？
POSTしようとしたときなんでしょうか？

.change()でフォーム項目の変更監視をしておけばよいのではないかと思いますが…。
http://kihon-no-ki.com/jquery-change-method-bind-form-tag

Comments

[penginer]

Javascriptのソースにミスが有ったので修正しました。
.change()は元からあります

[stampdoor]

うーん、ちょっとどうしたいのかが分かりづらいような気がします。

valid_x_echoとかvalid_e_echoとかそもそもfunctionで定義していないものが出てきますし、
valid($a)とかだと$aなんかの変数に何が渡っていますか？

functionとしてどこかで別途利用して呼び出すような処理を想定しているのでしょうか？

```javascript
$("#hoge input").change(function(){
va error ='<div id="a_valid"></div>';
var val = $(this).val();
if( !val == 'fuga' ){
var error = '<div id="a_valid"><p style="color:#ff2800;">入力されていません。</p></div>';
}else if(val != 'a' && val != 'b' && val != 'C'){
var error = '<div id="a_valid"><p style="color:#ff2800;">不正なPOSTです。</p></div>';
}
});
```
みたいな感じで単純に要素の変更にイベント発火を合わせたほうが把握しやすいし、
コードもスッキリして良いと思います。
（上記ももうちょっとスッキリをかけると思います。）

なにか意図があるようであればその旨を追記したほうが良さそうです。