はじめに

HTML で非表示(※)の <input required> に対して「入力が必要」のダイアログを表示する方法。

※厳密には非表示ではないが、人間的には非表示という感じ。詳細は後述。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. サンプル
    2. 解説(という名のメモ)
    3. 使い所
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.7
BuildVersion:	19H2
  • Google Chrome バージョン: 86.0.4240.111（Official Build） （x86_64）

詳細

参考: html - make hidden field required - Stack Overflow

サンプル

See the Pen [HTML] input required hidden dialog by 17num (@17num) on CodePen.

xxxx.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h5>ダイアログが出ない方</h5>
<form>
  <input type="text" class="d-none" required>
  <button type="submit">Submit 1</button>
</form>

<form>
  <input type="file" class="d-none" required>
  <button type="submit">File Submit 1</button>
</form>

<h5>ダイアログが出る方</h5>
<form>
  <input type="text" class="d-transparent" required>
  <button type="submit">Submit 2</button>
</form>

<form>
  <input type="file" class="d-transparent" required>
  <button type="submit">File Submit 2</button>
</form>

xxxx.css

1
2
3
4
5
6
7
8
9
.d-none {
  display: none;
}

.d-transparent {
  width: 1px;
  height: 1px;
  opacity: 0;
}

解説(という名のメモ)

ざっくり。

  • display: none; にすると An invalid form control with name='xxxx' is not focusable. のエラー (DevTools の Console)
    • 「フォーカスできないよ」と怒られる
  • width や height を小さくしたり、opacity で透明化する場合は「(人間の目には)見えないがフォーカスは可能」
    • 未入力の場合にダイアログが表示される

使い所

以下のような割と特殊なケースぐらいかな。

  • UI の都合上、標準のファイル選択ボタンは隠して独自ボタンを使ってファイル選択をさせたい
  • required による必須チェックも行いたい
  • 未選択時のダイアログはブラウザ標準のもので良い

まとめ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list