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

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

新規登録して質問してみよう
ただいま回答率
85.50%
バリデーション

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

JavaScript

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

jQuery

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

HTML

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

Q&A

解決済

1回答

4733閲覧

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

penginer

総合スコア32

バリデーション

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

JavaScript

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

jQuery

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

HTML

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

0グッド

0クリップ

投稿2018/05/10 09:02

編集2018/05/11 03:28

前提・実現したいこと

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

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

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

該当のソースコード

HTML

1<p class="controller hidecontents has" onclick="this.classList.toggle('hidecontents')"></p> 2<div class="hidden_show"> 3 <!--非表示ここから--> 4 <div id="hoge_valid"></div> 5 <p> 6 <div id="choice"> 7 <input type="checkbox" name="hoge" value="0" id="hoge0"> 8 <label for="hoge0"></label> 9 <br> 10 <br> 11 <input type="checkbox" name="hoge" value="1" id="hoge1"> 12 <label for="hoge1"></label> 13 <br> 14 <br> 15 <!--中略--> 16 <input type="checkbox" name="hoge" value="19" id="hoge19"> 17 <label for="hoge19"></label> 18 <br> 19 <br> 20 </div> 21 </p> 22 <div id="piyo_valid"></div> 23 <p> 24 <textarea style="width:100%;height:90px" name="piyo" rows="8" id="piyo" ></textarea> 25 </p> 26 <p> 27 <input type="checkbox" name="demand_none" value="X" id="check"> 28 <label for="check">特になし</label> 29 </p> 30 <!--ここまで--> 31</div> 32<br> 33<p class="controller hidecontents has" onclick="this.classList.toggle('hidecontents')"></p> 34<div class="hidden_show"> 35 <!--非表示ここから--> 36 <div id="huga_valid"></div> 37 <div id="huga_area"> 38 <p> 39 <textarea style="width:100%;height:90px" name="huga" rows="8" id="huga"></textarea> 40 </p> 41 <p> 42 <input type="checkbox" name="demand_check" value="X" id="demand_check"> 43 <label for="demand_check">特になし</label> 44 </p> 45 </div> 46 <!--ここまで--> 47</div> 48<br> 49<br> 50<p class="controller hidecontents has" onclick="this.classList.toggle('hidecontents')"></p> 51<div class="hidden_show"> 52 <!--非表示ここから--> 53 <div id="foo_valid"></div> 54 <div id="foo_area"> 55 <p> 56 <textarea style="width:100%;height:90px" name="foo" rows="8" id="foo"></textarea> 57 </p> 58 <p> 59 <input type="checkbox" name="foo_check" value="X" id="foo_check"> 60 <label for="foo_check">特になし</label> 61 </p> 62 </div> 63 <!--ここまで--> 64</div> 65<br>

js

1var $hoge = ""; 2var $error_hoge_ = ""; 3var $hoge_echo_ = ""; 4var $piyo = ""; 5var $error_piyo_ = ""; 6var $piyo_echo_ = ""; 7var $huga = ""; 8var $error_huga_ = ""; 9var $huga_echo_ = ""; 10var $foo = ""; 11var $error_foo_ = ""; 12var $foo_echo_ = ""; 13 14function valid_hoge( $hoge, $check, $value ) { 15 $error_hoge = "<div id=\"hoge_valid\"></div>"; 16 $hoge2 = [ /*配列の中身*/]; 17 if ( $hoge.length == 0 && !$check ) { 18 $error_hoge = "<div id=\"hoge_valid\"><p style=\"color:#ff2800;\">" + "入力されていません。" + "</p></div>"; 19 } else { 20 for ( $i = 0; $i < $hoge.length; $i++ ) { 21 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" ) { 22 $error_hoge = "<div id=\"hoge_valid\"><p style=\"color:#ff2800;\">" + "不正なPOSTです。" + "</p></div>"; 23 break; 24 } 25 } 26 } 27 return $error_hoge; 28} 29 30function valid_hoge_echo( $hoge, $check, $value ) { 31 var $hoge_echo = ""; 32 $error_message = valid_hoge( $hoge, $check, $value ); 33 $hoge2 = [ /*配列の中身*/]; 34 var $array = new Array(); 35 if ( $error_message === "<div id=\"hoge_valid\"></div>" ) { 36 for ( var i = 0; i < $hoge.length; i++ ) { 37 if ( $hoge_echo !== "" ) $hoge_echo += ","; 38 $hoge_echo += $hoge2[ parseInt( $hoge[ i ] ) ]; 39 } 40 } 41 $hoge_echo = $value === "X" ? "特になし" : ""; 42 return $hoge_echo; 43} 44 45function valid_piyo( $piyo, $check, $value ) { 46 $error_piyo = "<div id=\"piyo_valid\"></div>"; 47 if ( $piyo === "" && !$check ) { 48 $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">" + "入力されていません。" + "</p></div>"; 49 } else if ( chop( $piyo ) === "" || $value !== "X" ) { 50 $error_piyo = "<div id=\"piyo_valid\"><p style=\"color:#ff2800;\">" + "不正なPOSTです。" + "</p></div>"; 51 } 52 return $error_piyo; 53} 54 55function valid_piyo_echo( $piyo, $check, $value ) { 56 $piyo_echo = ""; 57 $error_message = valid_piyo( $piyo, $check, $value ); 58 if ( $error_message === "<div id=\"piyo_valid\"></div>" ) { 59 $piyo_echo = chop( $piyo ); 60 } 61 $piyo_echo = $value === "X" ? "特になし" : ""; 62 return $piyo_echo; 63} 64 65function valid_huga( $huga, $check, $value ) { 66 $error_huga = "<div id=\"huga_valid\"></div>"; 67 if ( $huga === "" && !$check ) { 68 $error_huga = "<div id=\"huga_valid\"><p style=\"color:#ff2800;\">" + "入力されていません。" + "</p></div>"; 69 } else if ( chop( $huga ) === "" || $value !== "X" ) { 70 $error_huga = "<div id=\"huga_valid\"><p style=\"color:#ff2800;\">" + "不正なPOSTです。" + "</p></div>"; 71 } 72 return $error_huga; 73} 74 75function valid_huga_echo( $huga, $check, $value ) { 76 $huga_echo = ""; 77 $error_message = valid_huga( $huga, $check, $value ); 78 if ( $error_message === "<div id=\"huga_valid\"></div>" ) { 79 $huga_echo = chop( $huga ); 80 } 81 $huga_echo = $value === "X" ? "特になし" : ""; 82 return $huga_echo; 83} 84 85function valid_foo( $foo, $check, $value ) { 86 $error_foo = "<div id=\"foo_valid\"></div>"; 87 if ( $foo === "" && !$check ) { 88 $error_foo = "<div id=\"foo_valid\"><p style=\"color:#ff2800;\">" + "入力されていません。" + "</p></div>"; 89 } else if ( chop( $foo ) === "" || $value !== "X" ) { 90 $error_foo = "<div id=\"foo_valid\"><p style=\"color:#ff2800;\">" + "不正なPOSTです。" + "</p></div>"; 91 } 92 return $error_foo; 93} 94 95function valid_foo_echo( $foo, $check, $value ) { 96 $foo_echo = ""; 97 $error_message = valid_foo( $foo, $check, $value ); 98 if ( $error_message === "<div id=\"foo_valid\"></div>" ) { 99 $foo_echo = chop( $foo ); 100 } 101 $foo_echo = $value === "X" ? "特になし" : ""; 102 return $foo_echo; 103} 104$( function() { 105 $( "#choice" ).change( function() { 106 ary = document.getElementsByName( 'hoge' ); 107 $hoge = new Array(); 108 if ( ary.length > 1 ) { 109 for ( var i = 0; i < ary.length; i++ ) { 110 if ( ary[ i ].checked ) { 111 $hoge.push( $( ary[ i ] ).val() ); 112 } 113 } 114 } 115 $check = $( "#choice" ).is( ':disabled' ); 116 $value = $( "#check" ).val(); 117 $error_hoge_ = valid_hoge( $hoge, $check, $value ); 118 $hoge_echo_ = valid_hoge_echo( $hoge, $check, $value ); 119 $( '#hoge_valid' ).html( valid_hoge( $hoge, $check, $value ) ); 120 console.log( $hoge ); 121 } ); 122 $( "#piyo" ).change( function() { 123 $check = $( "#piyo" ).is( ':disabled' ); 124 $value = $( "#check" ).val(); 125 $piyo = $( "#piyo" ).val(); 126 $( '#piyo_valid' ).html( valid_piyo( $piyo, $check, $value ) ); 127 $error_piyo_ = valid_piyo( $piyo, $check, $value ); 128 $piyo_echo_ = valid_piyo_echo( $piyo, $check, $value ); 129 } ); 130 $( "#huga_area" ).change( function() { 131 $check = $( "#huga" ).is( ':disabled' ); 132 $value = $( "#demand_check" ).val(); 133 $huga = $( "[name=huga]" ).val(); 134 $( '#huga_valid' ).html( valid_huga( $huga, $check, $value ) ); 135 $error_huga_ = valid_huga( $huga, $check, $value ); 136 $huga_echo_ = valid_huga_echo( $huga, $check, $value ); 137 } ); 138 $( "#foo_area" ).change( function() { 139 $check = $( "#foo" ).is( ':disabled' ); 140 $value = $( "#foo_check" ).val(); 141 $foo = $( "#foo" ).val(); 142 $( '#foo_valid' ).html( valid_foo( $foo, $check, $value ) ); 143 $error_foo_ = valid_foo( $foo, $check, $value ); 144 $foo_echo_ = valid_foo_echo( $foo, $check, $value ); 145 } ); 146 $( "#check" ).change( function() { 147 $( "#choice [type='checkbox']" ).prop( "disabled", $( "#check" ).prop( "checked" ) ); 148 } ).trigger( "change" ); 149 $( "#check" ).change( function() { 150 sampleCheckVal = $( "#check:checked" ).val(); 151 if ( sampleCheckVal == "X" ) { 152 $( "#piyo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" ); 153 } else { 154 $( "#piyo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" ); 155 } 156 } ).trigger( "change" ); 157 $( "#foo_check" ).change( function() { 158 sampleCheckVal = $( "#foo_check:checked" ).val(); 159 if ( sampleCheckVal == "X" ) { 160 $( "#foo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" ); 161 } else { 162 $( "#foo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" ); 163 } 164 } ).trigger( "change" ); 165 $( "#check" ).change( function() { 166 sampleCheckVal = $( "#check:checked" ).val(); 167 if ( sampleCheckVal == "X" ) { 168 $( "#piyo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" ); 169 } else { 170 $( "#piyo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" ); 171 } 172 } ).trigger( "change" ); 173 $( "#foo_check" ).change( function() { 174 sampleCheckVal = $( "#foo_check:checked" ).val(); 175 if ( sampleCheckVal == "X" ) { 176 $( "#foo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" ); 177 } else { 178 $( "#foo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" ); 179 } 180 } ).trigger( "change" ); 181 $( "#demand_check" ).change( function() { 182 sampleCheckVal = $( "#demand_check:checked" ).val(); 183 if ( sampleCheckVal == "X" ) { 184 $( "#huga" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" ); 185 } else { 186 $( "#huga" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" ); 187 } 188 } ).trigger( "change" ); 189} ); 190

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

jQuery:3.2.0

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/05/10 09:23

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

回答1

0

ベストアンサー

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

javascript

1$(function(){ 2 console.log($("#f1 input:text:not(:disabled)").length); 3});

HTML

1<form id="f1"> 2<input type="text" name="t1" value="1"><br> 3<input type="text" name="t2" value="2"><br> 4<input type="text" name="t3" value="3" disabled><br> 5<input type="text" name="t2" value="4"><br> 6<input type="text" name="t3" value="5" disabled><br> 7<input type="submit" value="go"> 8</form>

投稿2018/05/10 11:27

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

penginer

2018/05/10 12:36

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

2018/05/10 12:44

結局「disabledの時にはチェックする必要がない」 ということですよね?ちがうのでしょうか? それが「:not(:disabled)」ですが、試しましたか? テキストボックスとかチェックボックスとか関係ありません。 セレクタで選んだものに対して、バリデートをするだけですけど・・・・
penginer

2018/05/11 03:32

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問