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

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

ただいまの
回答率

90.85%

  • JavaScript

    14281questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7799questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    5997questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • バリデーション

    39questions

    Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 109

penginer

score 22

 前提・実現したいこと

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/ツールのバージョンなど)

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

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • x_x

    2018/04/24 17:00

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

    キャンセル

  • penginer

    2018/04/25 15:11

    変更しました

    キャンセル

回答 2

checkベストアンサー

+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);

        //...

      });


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

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


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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/22 20:01

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

    キャンセル

  • 2018/04/23 16:30

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

    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>';
    }
    });
    ```
    みたいな感じで単純に要素の変更にイベント発火を合わせたほうが把握しやすいし、
    コードもスッキリして良いと思います。
    (上記ももうちょっとスッキリをかけると思います。)

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

    キャンセル

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

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

関連した質問

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

  • JavaScript

    14281questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    7799questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    5997questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • バリデーション

    39questions

    Validationとは特定の入力データが、求められた条件に当てまっているかをチェックするために使われます。