質問編集履歴

2

ヒントを元に、意図した挙動に成功しました。

2017/02/15 08:06

投稿

seiji_maemura
seiji_maemura

スコア129

test CHANGED
File without changes
test CHANGED
@@ -176,158 +176,88 @@
176
176
 
177
177
  ```
178
178
 
179
- ```HTML
180
-
181
- <div>
182
-
183
- <table>
184
-
185
- <tbody>
186
-
187
- <tr>
188
-
189
- <th><span class="type01">必須</span>法人/個人</th>
190
-
191
- <td><span class="wpcf7-form-control-wrap entrySecond">
192
-
193
- <span class="wpcf7-form-control wpcf7-radio">
194
-
195
- <span class="wpcf7-list-item first">
196
-
197
- <label><input onclick="entryForm();" name="entrySecond" value="法人" type="radio">&nbsp;<span class="wpcf7-list-item-label">法人</span></label>
198
-
199
- </span>
200
-
201
- <span class="wpcf7-list-item last">
202
-
203
- <label><input onclick="entryForm();" name="entrySecond" value="個人" type="radio">&nbsp;<span class="wpcf7-list-item-label">個人</span></label>
204
-
205
- </span>
206
-
207
- </span>
208
-
209
- </span>
210
-
211
- </td>
212
-
213
- </tr>
214
-
215
- </tbody>
216
-
217
- </table>
218
-
219
- <table>
220
-
221
- <tbody>
222
-
223
- <tr id="corporation01">
224
-
225
- <th><span class="type01">必須</span>貴社名</th>
226
-
227
- <td><span class="wpcf7-form-control-wrap office_name"><input name="office_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="cnver1" aria-required="false" aria-invalid="false" type="text"></span></td>
228
-
229
- </tr>
230
-
231
- <tr id="corporation02">
232
-
233
- <th><span class="type01">必須</span>貴社名(ふりがな)</th>
234
-
235
- <td><span class="wpcf7-form-control-wrap office_s_name"><input name="office_s_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" id="cnver2" aria-required="false" aria-invalid="false" type="text"></span></td>
236
-
237
- </tr>
238
-
239
- <tr id="corporation03">
240
-
241
- <th><span class="type02">任意</span>部署名</th>
242
-
243
- <td><span class="wpcf7-form-control-wrap department"><input name="department" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></td>
244
-
245
- </tr>
246
-
247
- <tr>
248
-
249
- <th><span class="type01">必須</span>お名前</th>
250
-
251
- <td><span class="wpcf7-form-control-wrap user_name"><input name="user_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span></td>
252
-
253
- </tr>
254
-
255
- <tr>
256
-
257
- <th><span class="type01">必須</span>お名前(ふりがな)</th>
258
-
259
- <td><span class="wpcf7-form-control-wrap user_s_name"><input name="user_s_name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" type="text"></span></td>
260
-
261
- </tr>
262
-
263
- <tr>
264
-
265
- <th><span class="type02">任意</span>郵便番号</th>
266
-
267
- <td><span class="wpcf7-form-control-wrap zip"><input name="zip" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></td>
268
-
269
- </tr>
270
-
271
- <tr>
272
-
273
- <th><span class="type02">任意</span>ご住所</th>
274
-
275
- <td><span class="wpcf7-form-control-wrap address"><input name="address" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" type="text"></span></td>
276
-
277
- </tr>
278
-
279
- <tr>
280
-
281
- <th><span class="type02">任意</span>電話番号</th>
282
-
283
- <td><span class="wpcf7-form-control-wrap tel_number"><input name="tel_number" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" type="tel"></span></td>
284
-
285
- </tr>
286
-
287
- <tr>
288
-
289
- <th><span class="type02">任意</span>FAX番号</th>
290
-
291
- <td><span class="wpcf7-form-control-wrap fax_number"><input name="fax_number" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" type="tel"></span></td>
292
-
293
- </tr>
294
-
295
- <tr>
296
-
297
- <th><span class="type01">必須</span>メールアドレス</th>
298
-
299
- <td><span class="wpcf7-form-control-wrap email"><input name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" type="email"></span></td>
300
-
301
- </tr>
302
-
303
- <tr>
304
-
305
- <th><span class="type01">必須</span>メールアドレス(再入力)</th>
306
-
307
- <td><span class="wpcf7-form-control-wrap email_confirm"><input name="email_confirm" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" type="email"></span></td>
308
-
309
- </tr>
310
-
311
- </tbody>
312
-
313
- </table>
314
-
315
- </div>
179
+ ###現在の状態
180
+
181
+ 参考サイトを色々とめぐり、ContactForm7にonclickを追加したり、上記のjavascriptを追記でラジオで選んだアクションに対し、表示・非表示させる事までは出来ました。
182
+
183
+ しかし、隠した項目に必須項目があり見た目上見えないだけで、入力のバリデーションチェックが入りエラーとなって、送信が一向に完了しませんでした。
184
+
185
+
186
+
187
+ 条件にsetAttribute("aria-required", false);などと追記してみたものの効果がありませんでした。
188
+
189
+
190
+
191
+ 最悪隠す項目は必須を外す予定です。
192
+
193
+ プラグイン内部を改変せず、function.phpに追記ぐらいまでで実現が可能な方法があればご教示いただけますよう、よろしくお願いします。
194
+
195
+
196
+
197
+ ###その後の進捗
198
+
199
+ ヒントを頂いて、無事意図した動きを実現できました。
200
+
201
+ その完成ソースです。
202
+
203
+ ```javascript
204
+
205
+ <script type="text/javascript">
206
+
207
+ function entryForm() {
208
+
209
+ radio = document.getElementsByName('entrySecond');
210
+
211
+ var textValue_F = document.getElementById('cnver1');
212
+
213
+ var textValue_S = document.getElementById('cnver2');
214
+
215
+ if (radio[0].checked) {
216
+
217
+ document.getElementById('corporation01').style.display = "";
218
+
219
+ document.getElementById('corporation02').style.display = "";
220
+
221
+ document.getElementById('corporation03').style.display = "";
222
+
223
+ //ダミー文字をリセット
224
+
225
+ textValue_F.value = '';
226
+
227
+ textValue_S.value = '';
228
+
229
+ } else if (radio[1].checked) {
230
+
231
+ document.getElementById('corporation01').style.display = "none";
232
+
233
+ document.getElementById('corporation02').style.display = "none";
234
+
235
+ document.getElementById('corporation03').style.display = "none";
236
+
237
+ textValue_F.value = 'ダミー文字';
238
+
239
+ textValue_S.value = 'ダミー文字';
240
+
241
+ } else {
242
+
243
+ document.getElementById('corporation01').style.display = "none";
244
+
245
+ document.getElementById('corporation02').style.display = "none";
246
+
247
+ document.getElementById('corporation03').style.display = "none";
248
+
249
+ textValue_F.value = 'ダミー文字';
250
+
251
+ textValue_S.value = 'ダミー文字';
252
+
253
+ }
254
+
255
+ }
256
+
257
+ //オンロードさせ、リロード時に選択を保持
258
+
259
+ window.onload = entryForm;
260
+
261
+ </script>
316
262
 
317
263
  ```
318
-
319
- ###現在の状態
320
-
321
- 参考サイトを色々とめぐり、ContactForm7にonclickを追加したり、上記のjavascriptを追記でラジオで選んだアクションに対し、表示・非表示させる事までは出来ました。
322
-
323
- しかし、隠した項目に必須項目があり見た目上見えないだけで、入力のバリデーションチェックが入りエラーとなって、送信が一向に完了しませんでした。
324
-
325
-
326
-
327
- 条件にsetAttribute("aria-required", false);などと追記してみたものの効果がありませんでした。
328
-
329
-
330
-
331
- 最悪隠す項目は必須を外す予定です。
332
-
333
- プラグイン内部を改変せず、function.phpに追記ぐらいまでで実現が可能な方法があればご教示いただけますよう、よろしくお願いします。

1

ContactForm7に張り付けているソースを追記しました。

2017/02/15 08:06

投稿

seiji_maemura
seiji_maemura

スコア129

test CHANGED
File without changes
test CHANGED
@@ -64,6 +64,118 @@
64
64
 
65
65
  ```
66
66
 
67
+ ```PHP
68
+
69
+ <div>
70
+
71
+ <table>
72
+
73
+ <tr>
74
+
75
+ <th><span class="type01">必須</span>法人/個人</th>
76
+
77
+ <td>[radio entrySecond use_label_element "法人" "個人"]</td>
78
+
79
+ </tr>
80
+
81
+ </table>
82
+
83
+ <table>
84
+
85
+ <tr id="corporation01">
86
+
87
+ <th><span class="type01">必須</span>貴社名</th>
88
+
89
+ <td>[text* office_name id:cnver1]</td>
90
+
91
+ </tr>
92
+
93
+ <tr id="corporation02">
94
+
95
+ <th><span class="type01">必須</span>貴社名(ふりがな)</th>
96
+
97
+ <td>[text* office_s_name id:cnver2]</td>
98
+
99
+ </tr>
100
+
101
+ <tr id="corporation03">
102
+
103
+ <th><span class="type02">任意</span>部署名</th>
104
+
105
+ <td>[text department]</td>
106
+
107
+ </tr>
108
+
109
+ <tr>
110
+
111
+ <th><span class="type01">必須</span>お名前</th>
112
+
113
+ <td>[text* user_name]</td>
114
+
115
+ </tr>
116
+
117
+ <tr>
118
+
119
+ <th><span class="type01">必須</span>お名前(ふりがな)</th>
120
+
121
+ <td>[text* user_s_name]</td>
122
+
123
+ </tr>
124
+
125
+ <tr>
126
+
127
+ <th><span class="type02">任意</span>郵便番号</th>
128
+
129
+ <td>[text zip]</td>
130
+
131
+ </tr>
132
+
133
+ <tr>
134
+
135
+ <th><span class="type02">任意</span>ご住所</th>
136
+
137
+ <td>[text address]</td>
138
+
139
+ </tr>
140
+
141
+ <tr>
142
+
143
+ <th><span class="type02">任意</span>電話番号</th>
144
+
145
+ <td>[tel tel_number]</td>
146
+
147
+ </tr>
148
+
149
+ <tr>
150
+
151
+ <th><span class="type02">任意</span>FAX番号</th>
152
+
153
+ <td>[tel fax_number]</td>
154
+
155
+ </tr>
156
+
157
+ <tr>
158
+
159
+ <th><span class="type01">必須</span>メールアドレス</th>
160
+
161
+ <td>[email* email]</td>
162
+
163
+ </tr>
164
+
165
+ <tr>
166
+
167
+ <th><span class="type01">必須</span>メールアドレス(再入力)</th>
168
+
169
+ <td>[email* email_confirm]</td>
170
+
171
+ </tr>
172
+
173
+ </table>
174
+
175
+ </div>
176
+
177
+ ```
178
+
67
179
  ```HTML
68
180
 
69
181
  <div>
@@ -202,8 +314,6 @@
202
314
 
203
315
  </div>
204
316
 
205
- コード
206
-
207
317
  ```
208
318
 
209
319
  ###現在の状態