selectタグで選択した内容に応じてtextareaに入力必須のvalidationをかけたい

実現したいこと
selectタグで選択した内容に応じてtextareaに入力必須のvalidationをかけたいです。

具体的には、selelectタグで「ご用件」でその他を選択したときのみtextareaに入力必須のvalidationをかけたいです。

ご教授お願いいたします。

参考にしたサイト：https://laraweb.net/surrounding/6217/

現在はrequiredをかけた部分すべてにvalidationがかかっている状況ですが、「ご用件」の選択ボタンでその他を押したときにtextareaを入力必須にしたいと考えています。

bootstrap4を使用しています。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8
9    <!--Bootstrap CSS -->
10    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
11    <!--Font Awesome5-->
12    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
13
14    <!--自作CSS -->
15    <style type="text/css">
16        body {
17            background: radial-gradient(circle, rgba(241, 251, 243, 1) 0%, rgba(193, 255, 183, 1) 100%);
18        }
19
20        .footer {
21            /* Set the fixed height of the footer here */
22            height: 80px;
23            background-color: #a9a9a9;
24            width: 100%;
25        }
26    </style>
27</head>
28
29<body>
30
31    <div class="container">
32        <!-- Page Content -->
33        <div class="container p-lg-5 bg-light">
34            <form class="needs-validation" novalidate>
35
36                <!-- タイトル-->
37                <div class="title">
38                    <h3 class="text-center mb-4">訪問者記入表</h3>
39                </div>
40
41                <!-- 訪問日 -->
42                <div class="form-group mb-4">
43                    <div class="row">
44                        <div class="col-md-4">
45                            <label for="">訪問日</label>
46                            <input type="datetime-local" class="form-control" id="" placeholder="訪問日" size="30"
47                                value="2020-07-12T19:30" required>
48                            <div class="invalid-feedback">
49                                入力してください
50                            </div>
51                        </div>
52                    </div>
53                </div>
54
55                <!--会社名-->
56                <div class="form-group">
57                    <div class="row">
58                        <div class="col-md-6">
59                            <label for="inputCompany">会社名</label>
60                            <input type="text" class="form-control" id="inputCompany" placeholder="会社名" value="">
61                        </div>
62                    </div>
63                </div>
64                <!--/会社名-->
65
66                <!--氏名・人数-->
67                <div class="form-group">
68                    <div class="row">
69                        <div class="col-md-6">
70                            <label for="name">名前</label>
71                            <input type="text" class="form-control" id="name" placeholder="名前" value="" required>
72                            <div class="invalid-feedback">
73                                入力してください
74                            </div>
75                        </div>
76                        <div class="col-md-6 mb-3">
77                            <label for="people">人数</label>
78                            <input type="number" size="20" list="mylist1" class="input-group form-control" value=""
79                                min="1" required>
80                            <datalist id="mylist1">
81                                <option>1</option>
82                                <option>2</option>
83                                <option>3</option>
84                                <option>4</option>
85                                <option>5</option>
86                                <option>6</option>
87                            </datalist>
88                            <div class="invalid-feedback">
89                                入力してください
90                            </div>　
91                        </div>
92                    </div>
93                </div>
94
95                <!--/氏名・人数-->
96
97                <!--ご用件-->
98
99                <div class="form-inline mb-3">
100                    <div class="form-group mb-2">
101                        <label for="Textarea" class="mr-2">ご用件を選択してください</label>
102
103                        <select id="shortCut" class="form-control">
104                            <option value="面接できました">面接できました</option>
105                            <option value="営業できました">営業できました</option>
106                            <option value="掃除にきました">掃除に来ました</option>
107                            <option value="その他">その他</option>
108                        </select>
109                    </div>
110                </div>
111
112                <textarea name="" id="span" cols="2" rows="1" class="form-control" placeholder="選択内容以外の場合は記入してください"
113                    required></textarea>
114
115                <div class="invalid-feedback">入力してください</div>
116
117                <!--/ご用件-->
118
119
120
121                <!--ボタンブロック-->
122
123                <div class="col-md-12 text-center mt-3">
124                    <button type="submit" class="btn btn-primary">入力完了</button>
125                </div>
126
127                <!--/ボタンブロック-->
128            </form>
129
130            <div class="">
131                <a href="visitor-form-confirm.html">入力完了（仮）</a>
132            </div>
133
134        </div>
135
136    </div>
137    <!-- /container -->
138
139
140    <!-- Optional JavaScript -->
141    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
142    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
143    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
144    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
145
146    <script>
147        //validation
148        // 無効なフィールドがある場合にフォーム送信を無効にするスターターJavaScriptの例
149        (function () {
150            'use strict';
151
152            window.addEventListener('load', function () {
153                // カスタムブートストラップ検証スタイルを適用するすべてのフォームを取得
154                var forms = document.getElementsByClassName('needs-validation');
155
156                var sonota = document.getElementById
157                // ループして帰順を防ぐ
158                var validation = Array.prototype.filter.call(forms, function (form) {
159                    // submitボタンを押したら以下を実行
160                    form.addEventListener('submit', function (event) {
161                        if (form.checkValidity() === false) {
162                            event.preventDefault();
163                            event.stopPropagation();
164                        }
165
166
167
168                        form.classList.add('was-validated');
169
170
171
172
173
174
175                    }, false);
176                });
177            }, false);
178        })();
179
180        //その他を選択したときに入力必須にする
181
182    </script>
183</body>
184
185</html>

m.ts10806

2020/08/07 01:06

>「ご用件」の選択ボタンでその他を押したときにtextareaを入力必須にしたいと考えています。まず、それをそのままJavaScriptで書いてみては？

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1$(function(){
2  $('#shortCut').on('change',function(){
3    var flg=$(this).val()=="その他";
4    $('#span').prop('disabled',!flg);
5    $('#span').prop('required',flg);
6  });
7});