teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

追記

2018/09/16 13:51

投稿

spookybird
spookybird

スコア1803

answer CHANGED
@@ -15,4 +15,15 @@
15
15
  opacity: 0;
16
16
  width: 1px;
17
17
  }
18
- ```
18
+ ```
19
+
20
+ ### 追記2
21
+
22
+ [https://jsfiddle.net/tq4gj5bL/10/](https://jsfiddle.net/tq4gj5bL/10/)
23
+ ご提示のソースコードで状況を再現させてみて、修正を加えたものです。
24
+ ![バリデーション](c2b914145755a9afed64632eab3aaa8b.png)
25
+ このようにメッセージが出てきます。
26
+
27
+ (HTMLの構造がちょっとだけおかしかったのでそれも修正していますが、その修正前後で挙動は変化しませんでした。)
28
+
29
+ ブラウザによって挙動が異なるとかはもしかするとあるかもしれません。

1

追記

2018/09/16 13:50

投稿

spookybird
spookybird

スコア1803

answer CHANGED
@@ -3,4 +3,16 @@
3
3
  ざっと試した感じだと、`opacity: 0;`ならバリデーションが実行されます。
4
4
  が、見えないだけで幅をとるので、隙間ができます。
5
5
  これを`width: 0;`とすると、バリデーションの対象外になります。
6
- `width: 1px;`なら対象になります。
6
+ `width: 1px;`なら対象になります。
7
+
8
+ ### 追記
9
+
10
+ 非表示にしてはいけないので、冒頭のこの部分、`display: none;`をやめる必要があります。
11
+ 修正しないといけないのはここだけです。
12
+ ```css
13
+ input[type=radio], input[type=checkbox] {
14
+ display: none; // ← これは削除
15
+ opacity: 0;
16
+ width: 1px;
17
+ }
18
+ ```