やりたいこと

今回やりたかったのはドロップダウンメニューで「その他」が選ばれた時に表示する入力欄を入力必須にするためにrequiredをつけること。

その他を選択するまではこの入力欄はtype="hidden"のため、最初からrequiedをつけるとフォームの挙動がおかしくなり送信されない。その辺はこれを読むと理解がしやすい。https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input

そこでjQueryを使って入力欄が出たタイミングでrequiedをつけることにした。今後この入力欄のことを隠し入力欄と呼ぶことにする。

実装方法

前提：bootstrap4を使用している。

ドロップダウンメニュー

<select class="form-control form-control-lg" id="inputState" name="〇〇" type="text" required>
   <option value="〇〇">〇〇</option>
   <option value="〇〇">〇〇</option>
   <option value="〇〇">〇〇</option>
   <option value="その他">その他</option>
</select>

隠し入力欄

<input class="form-control form-control-lg" id="tr_writer" name="職種_その他" type="hidden" placeholder="職種を入力 [必須]"></input>

使用したjQuery

$("#inputState").change(function() {
 var extraction_val = $("#inputState").val();
 if(extraction_val == "その他") {
  $('#tr_writer').attr({
     type: 'text',
     required: ""
  })
 }
});

これで実現する。jQueryについてはコードを見ればなんとなくわかる程度なのでもっと勉強したい。