Q&A
jQueryはJavaScriptで作成されたJavaScriptのライブラリというのは認識済みですか？ ＜ jQueryとJavascriptを用いて
前提・実現したいこと
Javascriptを用いてフォームのバリデーションを行い、エラーがあればエラーメッセージを、
問題がなければその回答を表示しようとしています。
また、まだ何も入力していない時にはエラーメッセージを表示しないようにします。
フォームの中身は
複数選択用のチェックボックスとテキストエリアとチェックボックス(その他のものにdisabled属性を付加するもの)と、
テキストエリアとチェックボックス(テキストエリアにdisabled属性を付加するもの)です。
また、disabled属性がついた時はチェックボックスとテキストエリアの値の出力時に「特になし」と出力するつもりです。
バリデーション自体は「disabled属性をつけるチェックが付いているか」の真偽値とフォームに入力された値で行う予定です。
発生している問題・エラーメッセージ
現在
「disabled属性がついた時にエラーメッセージを消し、解除した時に再びバリデーションを行う」
「必要なバリデーションを変更が加えられる度に行う」
「disabled属性をつけるチェックボックスにチェックを入れたらdisabled属性をつける」
ということはできているのですが
$(function(){})の構文を使用しなければ全ての処理が働かず、
そう言ってこの構文を使ったら使ったで最初からエラーメッセージが表示されてしまいます。
該当のソースコード
尚、私の定義した関数は問題なく動くので省略します。
js
1$( function() { 2 $( "#choice input" ).change( function() { 3 ary = document.getElementsByName( 'hoge' ); 4 $hoge = new Array(); 5 if ( ary.length > 1 ) { 6 for ( var i = 0; i < ary.length; i++ ) { 7 if ( ary[ i ].checked ) { 8 $hoge.push( $( ary[ i ] ).val() ); 9 } 10 } 11 } 12 var $check2 = $( "#check" ).is( ':checked' ); 13 $error_hoge_ = valid_hoge( $hoge, $check2 ); 14 $hoge_echo_ = valid_hoge_echo( $hoge, $check2 ); 15 $( '#hoge_valid' ).html( valid_hoge( $hoge, $check2 ) ); 16 } ).trigger( "change" ); 17 $( "#piyo" ).change( function() { 18 var $check2 = $( "#check" ).is( ':checked' ); 19 $piyo = $( "#piyo" ).val(); 20 $( '#piyo_valid' ).html( valid_piyo( $piyo, $check2 ) ); 21 $error_piyo_ = valid_piyo( $piyo, $check2 ); 22 $piyo_echo_ = valid_piyo_echo( $piyo, $check2 ); 23 } ).trigger( "change" ); 24 $( "#check" ).change( function() { 25 var $check2 = $( "#check" ).is( ':checked' ); 26 $piyo = $( "#piyo" ).val(); 27 $( '#hoge_valid' ).html( valid_hoge( $hoge, $check2 ) ); 28 $( '#piyo_valid' ).html( valid_piyo( $piyo, $check2 ) ); 29 $error_piyo_ = valid_piyo( $piyo, $check2 ); 30 $piyo_echo_ = valid_piyo_echo( $piyo, $check2 ); 31 } ).trigger( "change" ); 32 $( "#foo" ).change( function() { 33 var $check2 = $( "#bar_check" ).is( ':checked' ); 34 $foo = $( "#foo" ).val(); 35 $( '#foo_valid' ).html( valid_foo( $foo, $check2 ) ); 36 $error_foo_ = valid_foo( $foo, $check2 ); 37 $foo_echo_ = valid_foo_echo( $foo, $check2 ); 38 } ).trigger( "change" ); 39 $( "#bar_check" ).change( function() { 40 var $check2 = $( "#bar_check" ).is( ':checked' ); 41 $foo = $( "#foo" ).val(); 42 $( '#foo_valid' ).html( valid_foo( $foo, $check2 ) ); 43 $error_foo_ = valid_foo( $foo, $check2 ); 44 $foo_echo_ = valid_foo_echo( $foo, $check2 ); 45 } ).trigger( "change" ); 46 $( "#check" ).change( function() { 47 $( "#choice [type='checkbox']" ).prop( "disabled", $( "#check" ).prop( "checked" ) ); 48 } ).trigger( "change" ); 49 $( "#check" ).change( function() { 50 sampleCheckVal = $( "#check" ).is( ':checked' ); 51 if ( sampleCheckVal == true ) { 52 $( "#piyo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" ); 53 } else { 54 $( "#piyo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" ); 55 } 56 } ).trigger( "change" ); 57 $( "#check" ).change( function() { 58 sampleCheckVal = $( "#check" ).is( ':checked' ); 59 if ( sampleCheckVal == true ) { 60 $( "#piyo" ).attr( "disabled", "disabled" ).css( "background-color", "#c8c8cb" ); 61 } else { 62 $( "#piyo" ).removeAttr( "disabled" ).css( "background-color", "#ffffff" ); 63 } 64 } ).trigger( "change" ); 65 66
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></p> 6 <div id="choice"> 7 <input id="hoge0" name="hoge" type="checkbox" value="0"><label for="hoge0"></label><br> 8 <br> 9 <input id="hoge1" name="hoge" type="checkbox" value="1"><label for="hoge1"></label><br> 10 <br> 11 <!--中略--> 12 <input id="hoge19" name="hoge" type="checkbox" value="19"><label for="hoge19"></label><br> 13 <br> 14 </div> 15 <p></p> 16 <div id="piyo_valid"></div> 17 <p> 18 <textarea id="piyo" name="piyo" rows="8" style="width:100%;height:90px"></textarea></p> 19 <p><input id="check" name="none" type="checkbox" value="X"><label for="check">特になし</label></p> 20 <!--ここまで--> 21 </div><br> 22 <p class="controller hidecontents has" onclick="this.classList.toggle('hidecontents')"></p> 23 <div class="hidden_show"> 24 <!--非表示ここから--> 25 <div id="foo_valid"></div> 26 <p> 27 <textarea id="foo" name="foo" rows="8" style="width:100%;height:90px"></textarea></p> 28 <p><input id="bar_check" name="bar_check" type="checkbox" value="X"><label for="bar_check">特になし</label></p> 29 <!--ここまで--> 30 </div><br>
補足情報（FW/ツールのバージョンなど）
jQuery:3.2.0
それは知っています。書き間違いです。申し訳ありませんでした。
ひとまずjQueryを使うのであればjQueryの記述に統一された方が可読性も良くなりますし、デバッグもしやすくなります。 document.getElementsByName() ですとか、onclick="" ですとか。かなりごちゃごちゃしているのでその辺り一度整理してみては？問題がもう少し明確になると思います。
どのように解決されたのでしょうか？ https://teratail.com/help/question-tips#questionTips4-2 > あなたがどのアドバイスを元に、どのように解決できたのかをお礼とともに伝えましょう。
もうベストアンサーはついています。
私が置いたリンク先を確認しましたか？私が言いたいのは「ベストアンサーを選んでください」ではなく「どのように解決したのか解決方法を記載してください」です。回答者さんの回答にいは「これを参考に色々改良していけば」とあります。現在はベストアンサーを選んだだけで、質問者さんがそこからどのように解決まで持っていけたかがありません。上記リンクにも書いてありますね。「どのように解決できたのかをお礼とともに伝えましょう。」 お礼すらもないのは礼儀としていかがでしょうか。
回答1件
0
ベストアンサー
$(function(){})の構文を使用しなければ全ての処理が働かず、
そう言ってこの構文を使ったら使ったで最初からエラーメッセージが表示されてしまいます。
$(function(){})が何のために存在するのかは知っていますか？
JSというかブラウザの仕様の話ですが、<script>タグを検知した瞬間にDOMのレンダリングを停止して、JSの解析＆実行を行ってしまう為、
フォーム部品が描かれない状態で$( "#check" )等の要素を探しにいき、「DOMを検索したけど何も無かったから後続の処理を行わずに正常終了したよ」と言っています。
これの対策として、JSではイベント駆動というアプローチが存在します。
予め「ページのDOM構築を待ってから実行する」という関数置き場に設置することで、DOMツリーが完成してからスクリプトが発火します。
jQueryの$(fn)はその簡易的な構文であり、必ずページのレンダリングが終わってから走ります。
なので動きます。
勝手にエラーが出るのは根本の設計がダメなだけで、jQueryのせいではありません。
じゃあどうすればいいか？
これに関してはJS世界で状態を握った方が良いでしょう。
例えばこんな風に、piyoを触ったよフラグを用意しておき、
フォーム部品にカーソルを当てて入力をし始める事に対してフォーカスと呼びますが、そのフォーカスで触ったフラグをtrueに変更します。
参考サイト: jQuery.focusin()
JavaScript
1$(functions(){ 2 var isTouched = { 3 piyo: false; 4 } 5 $( "#piyo" ).focusin(function(){ 6 isTouched.piyo = true; 7 }) 8 9 // 中略してvalid_piyoの直前 10 if (isTouched.piyo) { 11 valid_piyo($piyo, $check2); 12 } 13});
これを参考に色々改良していけば要望どおりの事が行えるんじゃないでしょうか？
投稿2018/05/14 04:34
総合スコア21158
あなたの回答
tips
プレビュー
