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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1778閲覧

【transmitMail】非表示エリアのバリデーションを無効にしたい

kitty

総合スコア15

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/06/10 08:03

編集2019/06/16 06:03

やりたいこと

transmitMailを使用してメールフォームを作成しています。
ラジオボタンの電話をチェックすると、
メールアドレス入力欄が非表示になり、再度メールにチェックをすると
メールアドレス入力欄が表示される。
というラジオボタンのチェック状況によって表示/非表示を切り替えるところまではできています。
できていないこと
メールにチェックをした場合のみ、メールアドレス入力欄は必須項目となります。
現在、電話にチェックして、メールアドレス入力欄が非表示になっているにも関わらず
バリデーションが効いてしまっていて、確認画面に進むことができていません。

コード①:ラジオボタン選択箇所

html

1 <tr> 2 <th class="required">ご希望の連絡方法</th> 3 <td> 4 <div class="contact-radio"> 5 <label class="contact-radio__item"> 6 <input type="radio" name="ご希望の連絡方法" value="メール" {$checked.ご希望の連絡方法.メール}> 7 メール 8 </label> 9 <label class="contact-radio__item"> 10 <input type="radio" name="ご希望の連絡方法" value="電話" {$checked.ご希望の連絡方法.電話}> 11 電話 12 </label> 13 </div> 14 <input type="hidden" name="required[]" value="ご希望の連絡方法"> 15 {if:$required.ご希望の連絡方法} 16 <div class="contact-note--under">{$required.ご希望の連絡方法}</div> 17 {/if:$required.ご希望の連絡方法} 18 </td> 19 </tr>

コード②:表示/非表示が変わる箇所

html

1 <tr id="js-mailArea"> 2 <th class="required">メールアドレス</th> 3 <td> 4 <div class="contact-paragraph"> 5 <input type="email" name="メールアドレス" value="{$メールアドレス}" class="contact-input" placeholder="info@links-ap.jp"> 6 <input type="hidden" name="email[]" value="メールアドレス"> 7 {if:$email.メールアドレス} 8 {$email.メールアドレス} 9 {/if:$email.メールアドレス} 10 <input type="hidden" name="required[]" value="メールアドレス" class="requireMail"><!-- ←必須の記述① --> 11 {if:$required.メールアドレス} 12 <div class="contact-note--under font-bold font-red">{$required.メールアドレス}</div> 13 {/if:$required.メールアドレス} 14 </div> 15 <div class="contact-paragraph"> 16 <p class="contact-note--top">確認のため、もう一度ご入力ください。</p> 17 <input type="email" name="メールアドレス確認用" value="{$メールアドレス確認用}" class="contact-input" placeholder="info@links-ap.jp"> 18 <input type="hidden" name="match[]" value="メールアドレス メールアドレス確認用"> 19 {if:$match.メールアドレス} 20 <div class="contact-note--under font-bold font-red">{$match.メールアドレス}</div> 21 {/if:$match.メールアドレス} 22 <input type="hidden" name="required[]" value="メールアドレス確認用" class="requireMail"><!-- ←必須の記述② --> 23 {if:$required.メールアドレス確認用} 24 <div class="contact-note--under">{$required.メールアドレス確認用}</div> 25 {/if:$required.メールアドレス確認用} 26 </div> 27 </td> 28 </tr>

※電話の方は一旦割愛させていただきます。必要でしたら記載します。

javascript

1 2const mailArea = document.getElementById('js-mailArea'); 3const telArea = document.getElementById('js-telArea');//割愛している電話エリアの指定 4const form = document.getElementById('formArea'); 5const targets = document.getElementById('requireMail'); 6const value = targets.getAttribute(name); 7const elm = document.querySelectorAll('.requireMail[name="require[]"]');//設定はしているものの使い方がわからない 8 9let result = null; 10const radios = document.getElementsByName('ご希望の連絡方法'); 11 12const output = () => { 13 for(let i = 0;i < radios.length;i++) { 14 if(radios[i].checked) { 15 result = radios[i].value; 16 if(result === 'メール') { 17 mailArea.classList.remove('is-hidden');//is-hiddenをつけるとエリアが非表示になる 18 telArea.classList.add('is-hidden'); 19 } else { 20 telArea.classList.remove('is-hidden'); 21 mailArea.classList.add('is-hidden'); 22 } 23 } 24} 25} 26 27form.addEventListener('change',()=> { 28 output(); 29});

試したこと

※1<input type="hidden" name="required[]" value="メールアドレス確認用" class="requireMail">
→これ(※1)が必須項目とさせている記述になるので、
電話を選択した時だけ「.requireMail」のname値「required[]」を空に
書き換えてしまおうと考えたのですが書き方が検討つきませんでした。

それなら、この(※1)記述自体を削除してしまおうとしたのですが
再度メールにチェックした際にこの要素が復活せず・・
(jqueryでいう、「append」や「detach」を使って削除した要素を復活できないのかなと考えていたが、javascriptで代わりのものが見つからなかった。)
例:https://www.sejuku.net/blog/39300#i-3

ちなみに、このTransmitMailには、バリデーションを考慮した上
でチェック状態によって出し分ける設定が用意されていないようです。
※ソース
https://github.com/dounokouno/TransmitMail/issues/2

TransmitMailで利用しているテンプレートには、if文の比較演算がありません。ですので、「ラジオボタンの選択内容を判別して表示を切り替える」ことはできません

正直全くわからないので・・・何かヒントでも回答でも
なんでもいただけたら嬉しいです。
よろしくお願いします。

追記

皆様のアドバイスを元に完成したものを一応記載します。
disabledの付け外しが少し苦戦したのでどなたかの参考になれば幸いです。
(もっと効率いい書き方はあると思いますが・・)
forEach文は勉強中のためfor文で。

javascript

1let hiddenAdd; 2let hiddenRemove; 3//属性を追加 4const hiddenAddFunc = (hiddenAdd) => { 5 for(let i = 0;i < hiddenAdd.length;i++) { 6 hiddenAdd[i].setAttribute('disabled','disabled'); 7 } 8} 9//属性を削除 10const hiddenRemoveFunc = (hiddenRemove) => { 11 for(let i = 0;i < hiddenRemove.length;i++) { 12 hiddenRemove[i].removeAttribute('disabled'); 13 } 14} 15//判定文 16let flag = 0; 17const hantei = (flag) => { 18 if(flag === 1) { 19 let hiddenAdd = telArea.querySelectorAll('input'); 20 let hiddenRemove = mailArea.querySelectorAll('input'); 21 hiddenAddFunc(hiddenAdd); 22 hiddenRemoveFunc(hiddenRemove); 23 } else if(flag === 2) { 24 let hiddenAdd = mailArea.querySelectorAll('input'); 25 let hiddenRemove = telArea.querySelectorAll('input'); 26 hiddenAddFunc(hiddenAdd); 27 hiddenRemoveFunc(hiddenRemove); 28 } 29} 30 31const output = () => { 32 for(let i = 0;i < radios.length;i++) { 33 if(radios[i].checked) { 34 result = radios[i].value; 35 if(result === 'メール') { 36 mailArea.classList.remove('is-hidden'); 37 telArea.classList.add('is-hidden'); 38 let flag = 1; 39 hantei(flag); 40 } else { 41 telArea.classList.remove('is-hidden'); 42 mailArea.classList.add('is-hidden'); 43 let flag = 2; 44 hantei(flag); 45 } 46 47 } 48} 49}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

TransmitMail の開発者です。 TransmitMail をご利用いただきありがとうございます。

x_x さんも書いてくださっていますが、 disabled 属性を付与するのが簡単そうです。( disabled 属性 を付与すると、その input は送信されなくなるので。)

disabled 属性の付与は、例えば下記のようなコードです。

javascript

1document.querySelectorAll('.requireMail').forEach(element => { 2 element.setAttribute('disabled', 'disabled'); 3});

ご参考になれば幸いです。

投稿2019/06/12 02:16

編集2019/06/12 12:27
dounokouno

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kitty

2019/06/16 03:56

確認が遅くなってすみません。 他にも応用できそうです。ありがとうございます。
guest

0

(jqueryでいう、「append」や「detach」を使って削除した要素を復活できないのかなと考えていたが、javascriptで代わりのものが見つからなかった。)

jQuery は JavaScriptでできているので当然あります。
https://developer.mozilla.org/ja/docs/Web/API/Node/removeChild

しかし、要素自体を消したり追加するよりも disabled 属性をつけて無効にしたほうが簡単そうです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input#disabled

投稿2019/06/11 04:30

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kitty

2019/06/16 03:57

ご確認ありがとうございました。 また遅くなってしまい申し訳ございません。 disabledをヒントに自分なりにも記述してみました。 他にも応用したいと思います。 また機会がありましたら宜しくお願いします。
guest

0

.is-hiddenとrequiredの組み合わせの話でしょうか?

javascript

1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 console.log(document.querySelectorAll('[required]:not(.is-hidden)').length);//命題はたぶんこれ 4 console.log(document.querySelectorAll('[required]').length); 5 console.log(document.querySelectorAll('[required].is-hidden').length); 6 console.log(document.querySelectorAll('.is-hidden').length); 7 console.log(document.querySelectorAll('.is-hidden:not([required])').length); 8}); 9 10</script> 11<input type="text" required> 12<input type="text" required class="is-hidden"> 13<input type="text" class="is-hidden"> 14 15

投稿2019/06/10 08:23

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kitty

2019/06/16 04:00

ご確認ありがとうございました。 また確認が遅くなってしまい申し訳ございません。is-hiddenがついている時にどうするか〜の判定の方が楽ですね。(targetの全てに".requireMail"をつけるより・・)。今回は開発者様のご提案で処理することにしました。また機会がありましたら宜しくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問