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

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

ただいまの
回答率

90.86%

  • JavaScript

    14736questions

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

  • HTML

    8026questions

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

  • jQuery

    6132questions

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

  • バリデーション

    39questions

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

Javascriptによるdisabled属性のついたフォームのバリデーションに関して

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 119

penginer

score 23

 前提・実現したいこと

Javascriptを用いたバリデーションとフォーム作成を行おうとしています。
また、バリデーションチェックが行われて問題がなければその回答を表示しようとしています。
フォームの中身は
複数選択用のチェックボックスとテキストエリアとチェックボックス(その他のものにdisabled属性を付加するもの)と、
テキストエリアとチェックボックス(テキストエリアにdisabled属性を付加するもの)です。
また、disabled属性がついた時はチェックボックスとテキストエリアの値の出力時に「特になし」と出力するつもりです。

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

現在「テキストエリアがスペースや改行だけの時メッセージを返す」
「チェックボックスに値が入っていない時にメッセージを返す」というものはできているのですが
「テキストエリアやチェックボックスにdisabled属性を付与した時
『エラーをないことにする』(出ていたエラーメッセージを消去し、送信時の最終のバリデーション時にエラーとしない)ためにどうすべきかわからない」
「disabled属性が無い時はチェックや記述したものの最終的な値の出力をすることはできるが
disabled属性がつくとどうすべきかわからない」
ということで困っています。
尚、disabled属性を付加するメソッドは問題なく動きます。
今回知りたいのは「そのプログラムをどういう風に組むか」です。(具体的なものがあるとありがたいです)尚下に書くソースコードは現在の状況です。

 該当のソースコード

<p class="controller hidecontents has" onclick="this.classList.toggle('hidecontents')"></p>
<div class="hidden_show">
  <!--非表示ここから-->
  <div id="hoge_valid"></div>
  <p>
    <div id="choice">
      <input type="checkbox" name="hoge" value="0" id="hoge0">
      <label for="hoge0"></label>
      <br>
      <br>
      <input type="checkbox" name="hoge" value="1" id="hoge1">
      <label for="hoge1"></label>
      <br>
      <br>
  <!--中略-->
      <input type="checkbox" name="hoge" value="19" id="hoge19">
      <label for="hoge19"></label>
      <br>
      <br>
    </div>
  </p>
  <div id="piyo_valid"></div>
  <p>
    <textarea style="width:100%;height:90px" name="piyo" rows="8" id="piyo" ></textarea>
  </p>
  <p>
    <input type="checkbox" name="demand_none" value="X" id="check">
    <label for="check">特になし</label>
  </p>
  <!--ここまで-->
</div>
<br>
<p class="controller hidecontents has" onclick="this.classList.toggle('hidecontents')"></p>
<div class="hidden_show">
  <!--非表示ここから-->
  <div id="huga_valid"></div>
  <div id="huga_area">
    <p>
      <textarea style="width:100%;height:90px" name="huga" rows="8" id="huga"></textarea>
    </p>
    <p>
      <input type="checkbox" name="demand_check" value="X" id="demand_check">
      <label for="demand_check">特になし</label>
    </p>
  </div>
  <!--ここまで-->
</div>
<br>
<br>
<p class="controller hidecontents has" onclick="this.classList.toggle('hidecontents')"></p>
<div class="hidden_show">
  <!--非表示ここから-->
  <div id="foo_valid"></div>
  <div id="foo_area">
    <p>
      <textarea style="width:100%;height:90px" name="foo" rows="8" id="foo"></textarea>
    </p>
    <p>
      <input type="checkbox" name="foo_check" value="X" id="foo_check">
      <label for="foo_check">特になし</label>
    </p>
  </div>
  <!--ここまで-->
</div>
<br>
var $hoge = "";
var $error_hoge_ = "";
var $hoge_echo_ = "";
var $piyo = "";
var $error_piyo_ = "";
var $piyo_echo_ = "";
var $huga = "";
var $error_huga_ = "";
var $huga_echo_ = "";
var $foo = "";
var $error_foo_ = "";
var $foo_echo_ = "";

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

function valid_hoge_echo( $hoge, $check, $value ) {
  var $hoge_echo = "";
  $error_message = valid_hoge( $hoge, $check, $value );
  $hoge2 = [ /*配列の中身*/];
  var $array = new Array();
  if ( $error_message === "<div id=\"hoge_valid\"></div>" ) {
    for ( var i = 0; i < $hoge.length; i++ ) {
      if ( $hoge_echo !== "" ) $hoge_echo += ",";
      $hoge_echo += $hoge2[ parseInt( $hoge[ i ] ) ];
    }
  }
  $hoge_echo = $value === "X" ? "特になし" : "";
  return $hoge_echo;
}

function valid_piyo( $piyo, $check, $value ) {
  $error_piyo = "<div id=\"piyo_valid\"></div>";
  if ( $piyo === "" && !$check ) {
    $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">" + "入力されていません。" + "</p></div>";
  } else if ( chop( $piyo ) === "" || $value !== "X" ) {
    $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">" + "不正なPOSTです。" + "</p></div>";
  }
  return $error_piyo;
}

function valid_piyo_echo( $piyo, $check, $value ) {
  $piyo_echo = "";
  $error_message = valid_piyo( $piyo, $check, $value );
  if ( $error_message === "<div id=\"piyo_valid\"></div>" ) {
    $piyo_echo = chop( $piyo );
  }
  $piyo_echo = $value === "X" ? "特になし" : "";
  return $piyo_echo;
}

function valid_huga( $huga, $check, $value ) {
  $error_huga = "<div id=\"huga_valid\"></div>";
  if ( $huga === "" && !$check ) {
    $error_huga = "<div id=\"huga_valid\"><p style=\"color:#ff2800;\">" + "入力されていません。" + "</p></div>";
  } else if ( chop( $huga ) === "" || $value !== "X" ) {
    $error_huga = "<div id=\"huga_valid\"><p style=\"color:#ff2800;\">" + "不正なPOSTです。" + "</p></div>";
  }
  return $error_huga;
}

function valid_huga_echo( $huga, $check, $value ) {
  $huga_echo = "";
  $error_message = valid_huga( $huga, $check, $value );
  if ( $error_message === "<div id=\"huga_valid\"></div>" ) {
    $huga_echo = chop( $huga );
  }
  $huga_echo = $value === "X" ? "特になし" : "";
  return $huga_echo;
}

function valid_foo( $foo, $check, $value ) {
  $error_foo = "<div id=\"foo_valid\"></div>";
  if ( $foo === "" && !$check ) {
    $error_foo = "<div id=\"foo_valid\"><p style=\"color:#ff2800;\">" + "入力されていません。" + "</p></div>";
  } else if ( chop( $foo ) === "" || $value !== "X" ) {
    $error_foo = "<div id=\"foo_valid\"><p style=\"color:#ff2800;\">" + "不正なPOSTです。" + "</p></div>";
  }
  return $error_foo;
}

function valid_foo_echo( $foo, $check, $value ) {
  $foo_echo = "";
  $error_message = valid_foo( $foo, $check, $value );
  if ( $error_message === "<div id=\"foo_valid\"></div>" ) {
    $foo_echo = chop( $foo );
  }
  $foo_echo = $value === "X" ? "特になし" : "";
  return $foo_echo;
}
$( function() {
  $( "#choice" ).change( function() {
    ary = document.getElementsByName( 'hoge' );
    $hoge = new Array();
    if ( ary.length > 1 ) {
      for ( var i = 0; i < ary.length; i++ ) {
        if ( ary[ i ].checked ) {
          $hoge.push( $( ary[ i ] ).val() );
        }
      }
    }
    $check = $( "#choice" ).is( ':disabled' );
    $value = $( "#check" ).val();
    $error_hoge_ = valid_hoge( $hoge, $check, $value );
    $hoge_echo_ = valid_hoge_echo( $hoge, $check, $value );
    $( '#hoge_valid' ).html( valid_hoge( $hoge, $check, $value ) );
    console.log( $hoge );
  } );
  $( "#piyo" ).change( function() {
    $check = $( "#piyo" ).is( ':disabled' );
    $value = $( "#check" ).val();
    $piyo = $( "#piyo" ).val();
    $( '#piyo_valid' ).html( valid_piyo( $piyo, $check, $value ) );
    $error_piyo_ = valid_piyo( $piyo, $check, $value );
    $piyo_echo_ = valid_piyo_echo( $piyo, $check, $value );
  } );
  $( "#huga_area" ).change( function() {
    $check = $( "#huga" ).is( ':disabled' );
    $value = $( "#demand_check" ).val();
    $huga = $( "[name=huga]" ).val();
    $( '#huga_valid' ).html( valid_huga( $huga, $check, $value ) );
    $error_huga_ = valid_huga( $huga, $check, $value );
    $huga_echo_ = valid_huga_echo( $huga, $check, $value );
  } );
  $( "#foo_area" ).change( function() {
    $check = $( "#foo" ).is( ':disabled' );
    $value = $( "#foo_check" ).val();
    $foo = $( "#foo" ).val();
    $( '#foo_valid' ).html( valid_foo( $foo, $check, $value ) );
    $error_foo_ = valid_foo( $foo, $check, $value );
    $foo_echo_ = valid_foo_echo( $foo, $check, $value );
  } );
  $( "#check" ).change( function() {
    $( "#choice [type='checkbox']" ).prop( "disabled", $( "#check" ).prop( "checked" ) );
  } ).trigger( "change" );
  $( "#check" ).change( function() {
    sampleCheckVal = $( "#check:checked" ).val();
    if ( sampleCheckVal == "X" ) {
      $( "#piyo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" );
    } else {
      $( "#piyo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" );
    }
  } ).trigger( "change" );
  $( "#foo_check" ).change( function() {
    sampleCheckVal = $( "#foo_check:checked" ).val();
    if ( sampleCheckVal == "X" ) {
      $( "#foo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" );
    } else {
      $( "#foo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" );
    }
  } ).trigger( "change" );
  $( "#check" ).change( function() {
    sampleCheckVal = $( "#check:checked" ).val();
    if ( sampleCheckVal == "X" ) {
      $( "#piyo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" );
    } else {
      $( "#piyo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" );
    }
  } ).trigger( "change" );
  $( "#foo_check" ).change( function() {
    sampleCheckVal = $( "#foo_check:checked" ).val();
    if ( sampleCheckVal == "X" ) {
      $( "#foo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" );
    } else {
      $( "#foo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" );
    }
  } ).trigger( "change" );
  $( "#demand_check" ).change( function() {
    sampleCheckVal = $( "#demand_check:checked" ).val();
    if ( sampleCheckVal == "X" ) {
      $( "#huga" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" );
    } else {
      $( "#huga" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" );
    }
  } ).trigger( "change" );
} );

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

jQuery:3.2.0

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • x_x

    2018/05/10 18:23

    「どうすべきかわからない」ということが(したい)というのがわかりませんでした。わからなくなりたい?

    キャンセル

回答 1

checkベストアンサー

0

jQueryでdisabledではないものをチェックするならセレクタに:not(:disabled)をつければよいのでは?

$(function(){
  console.log($("#f1 input:text:not(:disabled)").length);
});
<form id="f1">
<input type="text" name="t1" value="1"><br>
<input type="text" name="t2" value="2"><br>
<input type="text" name="t3" value="3" disabled><br>
<input type="text" name="t2" value="4"><br>
<input type="text" name="t3" value="5" disabled><br>
<input type="submit" value="go">
</form>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/10 21:36

    御返答ありがとうございます。
    ただ私がしたいのは
    「同じid(又はクラス)でdisabledではないもののバリデーションをチェックする」
    というものではなく
    「disabledであってもバリデーションが通るようにし、
    disabledでなければ普通にバリデーションを行う」というものです。
    また、ソースにある通り
    短文のテキストが複数ではなく
    段落を作れるテキストボックスとチェックボックス(disabledをかけるためのもの)と
    複数選択可能なチェックボックス段落を作れるテキストボックスとチェックボックス(disabledをかけるためのもの)で構成されています

    キャンセル

  • 2018/05/10 21:44

    結局「disabledの時にはチェックする必要がない」
    ということですよね?ちがうのでしょうか?

    それが「:not(:disabled)」ですが、試しましたか?
    テキストボックスとかチェックボックスとか関係ありません。
    セレクタで選んだものに対して、バリデートをするだけですけど・・・・

    キャンセル

  • 2018/05/11 12:32

    既に出ているエラーメッセージを消す。また、POSTする時の最終的なバリデーションや値の不正防止で
    念の為確認するためdisabledの時にもチェックするつもりです。
    全体的にソースを書き換えたので見ていただいた上でご教授いただいてもよろしいでしょうか?

    キャンセル

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

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

関連した質問

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

  • JavaScript

    14736questions

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

  • HTML

    8026questions

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

  • jQuery

    6132questions

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

  • バリデーション

    39questions

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