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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Bootstrap

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

Q&A

解決済

1回答

1079閲覧

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

soso0programmer

総合スコア35

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Bootstrap

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

0グッド

0クリップ

投稿2020/08/07 00:23

実現したいこと
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>

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

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

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

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

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

m.ts10806

2020/08/07 01:06

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

回答1

0

ベストアンサー

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});

投稿2020/08/07 01:13

yambejp

総合スコア114585

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

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

yambejp

2020/08/07 01:13

その他以外のときにdisabledをつけるかどうかは仕様次第
soso0programmer

2020/08/07 01:34

回答ありがとうございます。ご指摘頂いた内容で実現することができました。今回頂いた指摘とともにJavaScriptを勉強していきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問