お問い合わせフォーム：テキストフォームが必須項目にならない

Question

少し複雑なお問い合わせフォームのテキストエリアを必須項目にしたいです。

＜フォームの仕様＞

-ラジオボタンにチェックをすると、テキストエリアが出てきます。
（チェックが入ると表示するようにjQueryで制御）
-ラジオボタンもですが、テキストエリアも必須項目にしたいのですが、できません。
（ラジオボタンにチェックが入った時のみ必須にしたい）
そもそもラジオボタンの中にテキストエリアを入れるのが間違いなのかもしれませんが・・・
方法をご存知の方、参考になりそうなURLなどなんでも良いのでお力をお貸しいただけると幸いです。
よろしくお願いいたします。

＜フォームのHTML＞

<div id="form" class="container"> <form action="php/mailform.php" method="post" id="mail_form"> <dl> <dt>お問い合わせの種類<span>Inquiry Kind</span></dt> <dd class="required"> <ul> <li><label><input type="radio" class="kind" name="kind" value="サイトについて" required="required" />サイトについて</label></li>

**<li><label><input type="radio" class="kind" name="kind" value="商品について" id="check" required="required" />商品について</label></li>

<li><label class="box box_jan">商品名　<input type="text" id="box_name" name="kind" value="" required="required" /></label></li> <li><label class="box box_jan">商品バーコード<input type="text" id="box_jan" name="kind" value="" required="required"/></label></li> ** <li><label><input type="radio" class="kind" name="kind" value="キャンペーンについて" required="required" />キャンペーンについて</label></li> <li><label><input type="radio" class="kind" name="kind" value="ご感想" required="required" />ご感想</label></li> <li><label><input type="radio" class="kind" name="kind" value="その他" required="required" />その他</label></li> </ul> </dd>

  </dl>
  

<p id="form_submit" class="text-center"><input type="button" id="form_submit_button" value="送信する" onclick="doPost();" /></p> <input type="submit" value="不可視ボタン" style="display:none" name=submitBtn> </form> </div>

＜フォームのjQuery＞

<script> $('#check').click(function() { $(".box").slideToggle(this.checked); }); </script> <script> function doPost(){ $("input[name=submitBtn]").click(); } </script>

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

disabledを併用してください

$(function(){
  $('[name=kind]').on('change',function(){
    var flg=$('#check').prop('checked');
    $('#box_name,#box_jan').prop('disabled',!flg).closest('li').toggle(flg);
  }).eq(0).trigger('change');
});

Comments

[natumema]

ご回答ありがとうございます！
そちらを記載すると、オフラインだとアラートが出るようになりましたが、サーバー上にアップすると、未入力でも、アラートが出ずに送信できてしまいました。
PHPに問題があるのでしょうか？

[yambejp]

name=kindのradioがrequiredなら送信されないはずですが

[natumema]

だめですね・・・
required="required"　が作用しなくなる条件などがあるんでしょうか・・・

[natumema]

一瞬アラートがメッセージが出ていました、一瞬アラートが出て、すぐに解除されているようです。

[yambejp]

$('#box_name,#box_jan').prop('disabled',!flg).closest('li').toggle(flg);
をいったん
$('#box_name,#box_jan').prop('disabled',!flg);
にしてみてくださいdisabledされたinputが表示されますよね？
商品についてをチェックしたときdisabledが解除されるので
requiredが効いているはずです

[natumema]

ご回答ありがとうございました。
今回、開示していないPHPの方の設定も絡んでおり、残念ながら、yambejp様のコードだけでは解決とならなかったのですが、おそらくそれ以外では、こちらのコードで動くようになったのかな、と思いますので、ベストアンサーとさせてください。
心が折れそうだったので、とても励みになりました。
お付き合いありがとうございました。とても勉強になりました。