前提・実現したいこと
Google Apps Scriptのウェブアプリとして、公開を検討しています。
formの内容について、最低限の入力チェックをしようと考え、bootstrap-validatorを使って実現しようとしています。
- あるページにあるセレクトボックスの選択値によって、同一ページ内にあるテキストボックスのrequiredをつけたりはずしたりする。
- requiredの項目でvalidatエラーの時、枠を赤く強調したい。
発生している問題・エラーメッセージ
上記の2.が実現できないコントロールがあります。
通常なら、バリデーションエラーとなった後、対象のテキストボックスが赤くなるはずですが、一部のコントロールについては赤くなりません。ただし、マウスでそのテキストボックスを一度アクティブにして、別の項目に移動すると赤くなります。
該当のソースコード
関連しそうな部分を抜粋しています。
html
1 <script 2 src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" 3 integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" 4 crossorigin="anonymous" 5 ></script> 6 <script 7 src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" 8 integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" 9 crossorigin="anonymous" 10 ></script> 11 <script src="https://cdn.jsdelivr.net/npm/bootstrap-validator@0.11.9/js/validator.min.js"></script>
html
1<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main"> 2 <form class="form-horizontal" method="post" id="postform" onsubmit="return false;"> 3 <div class="panel panel-info"> 4 <div class="panel-heading"><?=value.title?></div> 5 <div class="panel-body"> 6 <div class="form-group"> 7 <label class="col-sm-2 col-xs-3 control-label" for="notify">通知</label> 8 <div class="col-sm-4 col-xs-9"> 9 <select 10 class="form-control input-lg" 11 id="notify" 12 name="notify" 13 onchange="notifyChange()" 14 > 15 <option value="mail" selected>メール</option> 16 <option value="todo">タスク</option> 17 </select> 18 </div> 19 </div> 20 21 <div class="form-group"> 22 <label class="col-sm-2 col-xs-3 control-label" for="title">登録名</label> 23 <div class="col-sm-10 col-xs-9"> 24 <input 25 class="form-control" 26 type="text" 27 name="title" 28 value="<?=value.title?>" 29 placeholder="Please enter title here..." 30 required 31 /> 32 </div> 33 </div> 34 35 <div class="form-group"> 36 <label class="col-sm-2 col-xs-3 control-label" for="days">日</label> 37 <div class="col-sm-2 col-xs-3"> 38 <? if(value.elapsed!=0){ ?> 39 <input 40 class="form-control" 41 type="text" 42 id="days" 43 name="days" 44 value="<?=value.elapsed?>" 45 placeholder="d" 46 /> 47 <? }else{ ?> 48 <input 49 class="form-control" 50 type="text" 51 id="days" 52 name="days" 53 value="<?=value.day?>" 54 placeholder="d" 55 /> 56 <? } ?> 57 </div> 58 <div class="col-sm-3 col-xs-4"> 59 <? if(value.elapsed!=0){ ?> 60 <input id="elapsed" name="elapsed" type="checkbox" checked /> 61 <? }else{ ?> 62 <input id="elapsed" name="elapsed" type="checkbox" /> 63 <? } ?> 64 <label class="check" for="elapsed"><div></div></label> 65 </div> 66 </div> 67 68 <div class="panel panel-plain"> 69 <div class="panel-heading"> 70 <div class="pull-right col-sm-3"> 71 <button type="submit" class="btn btn-success btn-long pull-right" id="send_button" value="12"> 72 <em class="fas fas-fw fa-check-circle"> </em>登録 73 </button> 74 </div> 75 <div class="pull-right col-sm-3"> 76 <button type="button" class="btn btn-warning btn-long pull-right" onclick="SideBarClick(12)"> 77 <em class="fas fas-fw fa-times-circle"> </em>戻る 78 </button> 79 </div> 80 </div> 81 </div> 82 </div> 83 </div> 84 </form> 85</div>
javascript
1 function notifyChange() { 2 if ($("#notify").val() == "todo") { 3 $("#days").attr("required", true); 4 } else { 5 $("#days").attr("required", false); 6 } 7 } 8
試したこと
登録ボタンを押すと項目のバリデートが行われ、エラーの場合は枠が赤くなり知らせてくれるのですが、日の部分だけなにも変わりません。
二つのテキストボックスを一つのform-groupにまとめて入れて試したところ、片側にrequiredが付いている場合、form-group内のどちらの項目も赤くなったことから、日の部分がテキストボックスとトグルスイッチをまとめているためだと思っているのですが、回避する方法をご存じの方はいらっしゃいますでしょうか。
補足
jQueryとかを駆使すればもっときれいにできそうに思うのですが、GAS+ajaxだとなかなか思うように動いてくれないので、ソースが汚いのは勘弁してください。
あなたの回答
tips
プレビュー