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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

0回答

1048閲覧

bootstrap3でのvalidationについて

com.woody

総合スコア43

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

JavaScript

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

jQuery

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2021/12/09 09:29

前提・実現したいこと

Google Apps Scriptのウェブアプリとして、公開を検討しています。
formの内容について、最低限の入力チェックをしようと考え、bootstrap-validatorを使って実現しようとしています。

  1. あるページにあるセレクトボックスの選択値によって、同一ページ内にあるテキストボックスのrequiredをつけたりはずしたりする。
  2. 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">&nbsp;</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">&nbsp;</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だとなかなか思うように動いてくれないので、ソースが汚いのは勘弁してください。

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

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

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

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

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

cerfweb

2021/12/09 10:39

つかぬことをお尋ねしますが、Bootstrap4とか5ではなくて、あえて3を使用される理由は何でしょうか。
com.woody

2021/12/09 15:11

特にこれといった理由はないのですが、流用しているテンプレートデザインがbootstrap3で作成されているためです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問