回答編集履歴

2

追記

2018/09/16 13:51

投稿

spookybird
spookybird

スコア1803

test CHANGED
@@ -33,3 +33,25 @@
33
33
  }
34
34
 
35
35
  ```
36
+
37
+
38
+
39
+ ### 追記2
40
+
41
+
42
+
43
+ [https://jsfiddle.net/tq4gj5bL/10/](https://jsfiddle.net/tq4gj5bL/10/)
44
+
45
+ ご提示のソースコードで状況を再現させてみて、修正を加えたものです。
46
+
47
+ ![バリデーション](c2b914145755a9afed64632eab3aaa8b.png)
48
+
49
+ このようにメッセージが出てきます。
50
+
51
+
52
+
53
+ (HTMLの構造がちょっとだけおかしかったのでそれも修正していますが、その修正前後で挙動は変化しませんでした。)
54
+
55
+
56
+
57
+ ブラウザによって挙動が異なるとかはもしかするとあるかもしれません。

1

追記

2018/09/16 13:50

投稿

spookybird
spookybird

スコア1803

test CHANGED
@@ -9,3 +9,27 @@
9
9
  これを`width: 0;`とすると、バリデーションの対象外になります。
10
10
 
11
11
  `width: 1px;`なら対象になります。
12
+
13
+
14
+
15
+ ### 追記
16
+
17
+
18
+
19
+ 非表示にしてはいけないので、冒頭のこの部分、`display: none;`をやめる必要があります。
20
+
21
+ 修正しないといけないのはここだけです。
22
+
23
+ ```css
24
+
25
+ input[type=radio], input[type=checkbox] {
26
+
27
+ display: none; // ← これは削除
28
+
29
+ opacity: 0;
30
+
31
+ width: 1px;
32
+
33
+ }
34
+
35
+ ```