CSS3でフォームのラジオボタンを疑似要素で装飾するとValidationEngineが効かない

前提・実現したいこと

現在コンタクトフォームを作成しております。
ValidationEngineを導入し、コンタクトフォームの入力ページにて
バリデートをかけておりました。きちんとバリデートがかかっておりました。

しかしCSS3でラジオボタンを疑似要素で装飾したところ
バリデートがかからず、送信ができてしまいます。

CSS3で装飾したラジオボタンでもバリデートをかけるにはどうしたらよいでしょうか？

調べてみたところValidationEngineは非表示の要素は無視してしまうようですが
方法がわからず困っております。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <link href="css/validateEngine.css" rel="stylesheet" />
8
9  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
10  <script src="js/validateEngine.js"></script>
11  <title>Document</title>
12  <style>
13  .container {
14    width: 70%;
15    margin: 50px auto;
16    border: 1px solid #CCC;
17    padding: 50px;
18  }
19
20
21  .radio01-input{
22    display: none;
23  }
24  .radio01-input + label{
25    padding-left: 20px;
26    position:relative;
27    margin-right: 20px;
28  }
29  .radio01-input + label::before{
30    content: "";
31    display: block;
32    position: absolute;
33    top: 0;
34    left: 0;
35    width: 15px;
36    height: 15px;
37    border: 1px solid #999;
38    border-radius: 50%;
39  }
40  .radio01-input:checked + label{
41    color: #009a9a;
42  }
43  .radio01-input:checked + label::after{
44    content: "";
45    display: block;
46    position: absolute;
47    top: 3px;
48    left: 3px;
49    width: 11px;
50    height: 11px;
51    background: #009a9a;
52    border-radius: 50%;
53  }
54  /* css checkbox01 */
55  .checkbox01-input{
56    display: none;
57  }
58  .checkbox01-parts{
59    padding-left: 20px;
60    position:relative;
61    margin-right: 20px;
62  }
63  .checkbox01-parts::before{
64    content: "";
65    display: block;
66    position: absolute;
67    top: 0;
68    left: 0;
69    width: 15px;
70    height: 15px;
71    border: 1px solid #999;
72    border-radius: 4px;
73  }
74  .checkbox01-input:checked + .checkbox01-parts{
75    color: #009a9a;
76  }
77  .checkbox01-input:checked + .checkbox01-parts::after{
78    content: "";
79    display: block;
80    position: absolute;
81    top: -5px;
82    left: 5px;
83    width: 7px;
84    height: 14px;
85    transform: rotate(40deg);
86    border-bottom: 3px solid #009a9a;
87    border-right: 3px solid #009a9a;
88  }
89  .inline-block {
90    display: inline-block;
91  }
92  </style>
93</head>
94<body>
95<!-- ========================================================== -->
96<!-- =================CSS3を使用したフォーム=================== -->
97<!-- ========================================================== -->
98  <div class="container">
99    <h1>CSS3を使用したフォーム</h1>
100    <form id="mail-form1" method="POST" action="/confirm/">
101      <p class="inline-block">お名前</p>
102      <input id="name" class="validate[required]" type="text" name="name" value="">
103      <div class="radio01">
104        <input type="radio" name="radio01" class="radio01-input validate[required]" id="radio01-01">
105        <label for="radio01-01">ラジオ01</label>
106        <input type="radio" name="radio01" class="radio01-input validate[required]" id="radio01-02">
107        <label for="radio01-02">ラジオ02</label>
108        <input type="radio" name="radio01" class="radio01-input validate[required]" id="radio01-03">
109        <label for="radio01-03">ラジオ03</label>
110      </div>
111
112
113      <div class="checkbox01">
114        <label>
115          <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
116          <span class="checkbox01-parts">チェックボックス01</span>
117        </label>
118        <label>
119          <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
120          <span class="checkbox01-parts">チェックボックス02</span>
121        </label>
122        <label>
123          <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
124          <span class="checkbox01-parts">チェックボックス03</span>
125        </label>
126      </div>
127      <button class="button" type="submit" name="submit">入力内容を確認する</button>
128    </form>
129  </div>
130
131
132  <!-- ========================================================== -->
133  <!-- =================CSS3を使用しないフォーム================= -->
134  <!-- ========================================================== -->
135  <div class="container">
136    <h1>CSS3を使用していないフォーム</h1>
137    <form id="mail-form2" method="POST" action="/confirm/">
138      <p class="inline-block">お名前</p>
139      <input id="name" class="validate[required]" type="text" name="name" value="">
140      <div>
141        <input type="radio" name="radio02" class="radio02-input validate[required]" id="radio02-01">
142        <label for="radio02-01">ラジオ01</label>
143        <input type="radio" name="radio02" class="radio02-input validate[required]" id="radio02-02">
144        <label for="radio02-02">ラジオ02</label>
145        <input type="radio" name="radio02" class="radio02-input validate[required]" id="radio02-03">
146        <label for="radio02-03">ラジオ03</label>
147      </div>
148
149
150      <div class="checkbox01">
151        <label>
152          <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
153          <span class="checkbox01-parts">チェックボックス01</span>
154        </label>
155        <label>
156          <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
157          <span class="checkbox01-parts">チェックボックス02</span>
158        </label>
159        <label>
160          <input type="checkbox" name="checkbox01[]" class="checkbox01-input">
161          <span class="checkbox01-parts">チェックボックス03</span>
162        </label>
163      </div>
164      <button class="button" type="submit" name="submit">入力内容を確認する</button>
165    </form>
166  </div>
167  <script>
168  jQuery(document).ready(function() {
169    jQuery("#mail-form1").validationEngine();
170    jQuery("#mail-form2").validationEngine();
171
172  });
173  </script>
174</body>
175</html>
176

試したこと

※検証用としてCSS3で装飾したフォームと装飾をしていないフォームを用意して
バリデートのかかり具合を試してみました。

補足情報（FW/ツールのバージョンなど）

OSX 10.14

退会済みユーザー

2018/11/05 11:53 編集

CSS3を使用していないフォームにもバリデートがかかってなくないですか?CSS3を使用していないフォームのラジオボタンを押すとエラーがでます。きちんとバリデートがかかってるソースをご提示ください。

bellsmarket

2018/11/05 12:30 編集

当方の環境で動作しているコードをコピペしております。 ValidationEngineのCSSファイルとJSファイルがないのではないでしょうか？ jQueryはCDNにホストしているファイルを読み込んでますが、ValidationEngineのCSSファイルとJSファイルは用意していただく必要があります。こちらからhttps://github.com/posabsolute/jQuery-Validation-Engineからダウンロードをお願いします。

退会済みユーザー

2018/11/05 12:31

既に読み込んでおり、名前欄でのみValidation Engineが動くことを確認できています。そちらでは何のエラーも発生していないのですか？

bellsmarket

2018/11/05 12:42

CSS3を使用していないフォームでは名前でもラジオボタンでもバリデート機能は動作しております。手元のhtmlファイルとteratailに記載したコードをdiffで比べましたが、相違点は見つかりません。DeveloperToolでもエラーはありません。

行動規範の内容に同意します

回答2件

ベストアンサー

指摘の通り非表示では使えないため、opacity などで不可視にします。
これは ValidationEngine に限らず、標準の検証でも同じことが言えます。

CSS
1  .radio01-input{
2    /*display: none;*/
3    opacity: 0;
4    position: absolute;
5  }

投稿2018/11/06 02:19

x_x

総合スコア13749

CSS3の方は

css
1  .radio01-input{
2    display: none;
3  }

で、要素をなくしてしまっているので、Validation Engineがラジオボタンを認識していません。
そこを

css
1  .radio01-input{
2    visibility: hidden;
3  }

にすると動きます。
ラジオボタンが多少右にずれますので、他で調節しましょう。

--- 追記 ---
visibility:hiddenは、要素はあるけど見えていない状態
display:noneは、要素が取得されず、その場にない状態
です。

投稿2018/11/06 01:56

編集2018/11/06 02:05

colling

総合スコア798

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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