divタグを追加したいが、追加するとレイアウトが崩れてしまう

こんな画面を作りました。

必須入力のバリデーションエラーの時、枠を赤くしたかったため、日付のテキストボックスだけをform-groupでラップしてあげる必要ができました。（下記、htmlソースのコメント行）

ところがこの行を有効にすると、レイアウトが崩れてしまいます。

レイアウトが崩れないように（真上にある年月のテキストフィールドと同じ幅になるように）コメントのdiv-formが生きるような修正方法をご教示いただきたいです。

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  <form class="form-horizontal" method="post" id="postform" onsubmit="return false;">
2    <div class="panel panel-info">
3      <div class="panel-body">
4        <div class="form-group">
5          <label class="col-sm-2 col-xs-3 control-label" for="notify">通知方法</label>
6          <div class="col-sm-4 col-xs-9">
7            <select
8              class="form-control input-lg"
9              id="notify"
10              name="notify"
11              onchange="notifyChange()"
12            >
13              <option value="メール">メール</option>
14              <option value="タスク" selected>タスク</option>
15            </select>
16          </div>
17        </div>
18
19        <div class="form-group">
20          <label class="col-sm-2 col-xs-3 control-label" for="year_month">年月</label>
21          <div class="col-sm-2 col-xs-4">
22            <input class="form-control" type="text" name="year" required />
23          </div>
24          <div class="col-sm-2 col-xs-3">
25            <input class="form-control" type="text" name="month" required />
26          </div>
27        </div>
28
29        <div class="form-group">
30          <label class="col-sm-2 col-xs-3 control-label" for="day">日付</label>
31          <div class="col-sm-2 col-xs-3">
32            <!-- <div class="form-group"> -->
33            <input
34              class="form-control"
35              type="text"
36              id="day"
37              name="day"
38            />
39            <!-- </div> -->
40          </div>
41          <div class="col-sm-3 col-xs-4">
42            <input id="elapsed" name="elapsed" type="checkbox" />
43            <label class="check" for="elapsed"><div></div></label>
44          </div>
45        </div>
46      </div>
47      <div class="panel panel-plain">
48        <div class="panel-heading">
49          <div class="pull-right col-sm-3">
50            <button type="submit" class="btn btn-success btn-long pull-right" id="send_button">
51              <em class="fas fas-fw fa-check-circle">&nbsp;</em>登録
52            </button>
53          </div>
54        </div>
55      </div>
56    </div>
57  </form>

javascript
1  function notifyChange() {
2    if ($("#notify").val() == "タスク") {
3      $("#day").attr("required", true);
4    } else {
5      $("#day").attr("required", false);
6    }

css
1
2  input[type="checkbox"] {
3    display: none;
4  }
5
6  input[type="checkbox"] + label.check {
7    position: relative;
8    cursor: pointer;
9    display: inline-block;
10    width: 70px;
11    height: 28px;
12    color: #969696;
13    border: 1px solid #a3a3a3;
14    border-radius: 3px;
15    background-color: #ffffff;
16    margin-top: 7px;
17  }
18
19  input[type="checkbox"]:checked + label.check {
20    border: 1px solid #4db4e4;
21    background-color: #4db4e4;
22  }
23
24  input[type="checkbox"] + label.check::before {
25    content: "固定日";
26    position: absolute;
27    top: 4px;
28    left: auto;
29    right: 6px;
30  }
31
32  input[type="checkbox"]:checked + label.check::before {
33    content: "営業日";
34    position: absolute;
35    left: 6px;
36    right: auto;
37    color: #ffffff;
38  }
39
40  input[type="checkbox"] + label.check > div {
41    position: absolute;
42    top: 2px;
43    left: 2px;
44    width: 12px;
45    height: 22px;
46    border: 1px solid #a3a3a3;
47    border-radius: 3px;
48    background-color: #ffffff;
49    transition: 0.2s;
50  }
51
52  input[type="checkbox"]:checked + label.check > div {
53    border: 1px solid transparent;
54    left: 54px;
55  }
56

Lhankor_Mhy

2021/12/14 08:59

「必須入力のバリデーションエラーの時、枠を赤くしたかったため、日付のテキストボックスだけをform-groupでラップしてあげる必要ができました」とのことですが、ラップしないとどういう問題が起きますか？

com.woody

2021/12/14 09:32 編集

>ラップしないとどういう問題が起きますか？日付のテキストフィールドだけ赤くなりません。（他のrequired項目は赤くなる）ただ、判定が終わった後、マウスで日のテキストフィールドをアクティブにして、他の項目に移動すれば赤くなります。ソースからは割愛していますが、画面写真上の通知方法のonchangeにjQueryの関数を指定しており、選択された内容によって$("#day").attr("required",true)しています。

Lhankor_Mhy

2021/12/14 09:39

ご提示のコードを試してみましたが、日付だけではなく全てのフィールドが赤くなりませんでした。そもそも、requiredの項目がないようです。

com.woody

2021/12/14 14:37

Lhankor_Mhyさんご指摘に応じて、必要と思われるソースを追加しました。引き続きご助力いただけると幸いです。

Lhankor_Mhy

2021/12/15 01:22 編集

補足ありがとうございます。ご提示のコードですと、「日付」が required になりましたが、赤い枠はつきませんでした。また、ご提示のコードですと、スクリーンショットのようなレイアウトにはなりませんでしたので、問題を再現することができませんでした。おそらく、問題を再現するにはCSSとJSが不足しているのだと思います。

com.woody

2021/12/15 01:29

Lhankor_Mhyさん再度ソースを追加しました。引き続きご助力いただけると幸いです。

Lhankor_Mhy

2021/12/15 01:36

補足ありがとうございます。残念ながら上記の状況は変わりませんでした。軽くググってみた感じ、bootstrap-validator を必要な要素に適用する必要があるのではないかと感じました。申し訳ないのですが、コードを提示する前に、そのコード**だけ**で問題が再現するかどうかを確認してからご投稿いただきたいと思います。