ラジオボタン未選択で送信ボタンをクリックした時にエラーを表示させたいのですが記述方法がわかりません。

5日以上にわたり、エラーを表示させる方法についてネットで調べましたが、jqueryに関してはかなりの初心者であるため、自分が使っているテキスト以外の記述方法ですと、悲しいことに全くわかりません。

フォームのコードと、jsのコードを載せます。
jsのコードに書いてある
「クレジットカードの値が空 && 銀行振込の値が空　&& 着払いの値が空」の部分の記述方法が分かりません。何度も何通りも書き試しましたが全くうまくいきませんでした。

初めて質問するため読みにくいかもしれず申し訳ありませんが大変困っております。
どうかお力をお貸しください。

<div id="form_area">
            <div class="form_column">
              <div class="form_label">お名前<span class="form_red">必須</span></div>
              <div class="form_input">
                <input type="text" name="username" id="username" class="form_parts" placeholder="山田　太郎">
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">フリガナ<span class="form_red">必須</span></div>
              <div class="form_input">
                <input type="text" name="userkana" id="userkana" class="form_parts" placeholder="ヤマダ　タロウ">
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">郵便番号<span class="form_red">必須</span></div>
              <div class="form_input">
                <input type="text" name="post" id="post" class="form_parts" placeholder="1234567">
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">都道府県<span class="form_red">必須</span></div>
              <div class="form_input">
                 <select name="pref2" id="pref2" class="form_parts">
                    <option value="" selected>選択してください</option>
                    <option value="北海道">北海道</option>
                    <option value="青森県">青森県</option>
                    <option value="岩手県">岩手県</option>
                    <option value="宮城県">宮城県</option>
                 </select>
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">市区町村<span class="form_red">必須</span></div>
              <div class="form_input">
                <input type="text" name="municipalities" id="municipalities" class="form_parts" placeholder="○○○○○○１−１">
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">マンション名<span class="form_gray">任意</span></div>
              <div class="form_input">
                <input type="text" name="apartment" id="apartment" class="form_parts" placeholder="○○○○○○マンション○○号">
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">電話番号<span class="form_red">必須</span></div>
              <div class="form_input">
                <input type="text" name="tel_no" id="tel_no" class="form_parts" placeholder="00000000000">
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">メールアドレス<span class="form_red">必須</span></div>
              <div class="form_input">
                <input type="text" name="email" id="email" class="form_parts" placeholder="○○○○○○@○○○○○○.○○○">
              </div>
            </div>
            <div class="form_column">
              <div class="form_label">パスワード<span class="form_red">必須</span></div>
              <div class="form_input">
                <input type="password" name="password" id="password" class="form_parts" placeholder="4文字以上、英数字含む">
              </div>
            </div>
          </div>

          <div class="payment_title">お支払い方法</div>
          <label>
           <input type="radio" name="payment" id="creditcard" class="payment_parts" value="クレジットカード"　required>クレジットカード
          </label>
          <label>
           <input type="radio" name="payment" id="bank" class="payment_parts" value="銀行振込">銀行振込
          </label>
          <label>
           <input type="radio" name="payment" id="cash_on_delivery" class="payment_parts" value="着払い">着払い
          </label>
         </div>
           
           <p id="form_has_error"></p>
           <div id="order">
             <button type="submit" name="order_button" id="order_button">注文する▼</button>
           </div>
    </div>```ここに言語を入力
コード
$('#order_button').on('click',function(e) {
  var username = $('#username').val();
  var userkana = $('#userkana').val();
  var post = $('#post').val();
  var pref2 = $('#pref2').val();
  var municipalities = $('#municipalities').val();
  var tel_no = $('#tel_no').val();
  var email = $('#email').val();
  var password = $('#password').val();
  var creditcard = $('#creditcard').prop("checked");
  var bank = $('#bank').prop("checked");
  var cash_on_delivery = $('#cash_on_delivery').prop("checked");
  var order_button = $('#submit').val();
  

  var error_text = '';
  
  if (username.trim() === '') {
    error_text = 'お名前を入力してください';
  }
  else if (userkana.trim() === '') {
    error_text = 'フリガナを入力してください';
  }
  else if (!userkana.match(/^[ァ-ヴ　]+$/)) {
    error_text = 'フリガナには全角のカタカナとスペースのみを入力してください';
  }
  else if (post.trim() === '') {
    error_text = '郵便番号を入力してください';
  }
  else if (pref2.trim() === '') {
    error_text = '都道府県を選択してください';
  }
  else if (municipalities.trim() === '') {
    error_text = '市区町村を入力してください';
  }
  else if (!municipalities.match(/^[^\x20-\x7e]*$/)) {
    error_text = '全角で入力してください'; 
  }
  else if (!tel_no.match(/^0\d{9,10}$/)) {
    error_text = '電話番号を入力してください'; 
  }
  else if (email.trim() === '') {
    error_text = 'メールアドレスを入力してください';
  }
  else if (!email.match(/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/)) {
    error_text = 'メールアドレスを正しい書式で入力してください';
  }
  else if (!password.match(/^(?=.*[a-zA-Z])[a-zA-Z0-9]{4,}$/)) {
    error_text = '4文字以上英数字で入力してください' 
  }
  else if(クレジットカードの値が空 && 銀行振込の値が空　&& 着払いの値が空) {
    error_text = 'お支払い方法を選択してください';
  }
  

  $('#form_has_error').text(error_text);
  
  if (error_text === '') {
    //$('#contact_form').submit();
  }
});

コード


以上です。
よろしくお願いいたします。

javahack

2022/07/30 08:19

調べたことが何も書かれていませんが、「javascript radio checked 判定」で検索して出てくるサイトを読んでいろいろ試してみてはいかがでしょうか。

neko-desu

2022/07/30 08:27

ご提案いただきありがとうございます。ラジオボタン　未選択　エラー表示　jquery ラジオボタン　バリデーション　jquery 入力チェックとエラー表示など、書ききれないほど調べブックマークし何度も読み何日も試していました。それでも何を試してもうまくいかず困っているので投稿しました。

maisumakun

2022/07/30 09:01

> 書ききれないほど調べブックマークし何度も読み何日も試していました。読んだ記事のURLと、「実際に書いたコード」をご提示ください。

neko-desu

2022/07/30 09:25

コメントありがとうございます。ラジオボタンの未選択エラーに関して読んだ記事のURL https://to-benefit7.com/jquery-inputcheck/ https://qiita.com/shige-u/items/58d82cb85fc7496572f3 https://mugenweb-note.com/web/jquery/radio-selectbox-validation https://takuyakobayashi.id/blog/2020/01/23/6178 https://simplesimples.com/web/markup/javascript/formcheck/ https://code-kitchen.dev/html/input-radio/ https://itsakura.com/jquery-radiobutton https://www.sejuku.net/blog/46739 他には正規表現に関する記事なので割愛します。コードを書く→試す→うまくいかない→削除→また違うコードを書く・・・、ということを繰り返していたので、実際に書いたコードは今は残っておらず else if(クレジットカードの値が空 && 銀行振込の値が空　&& 着払いの値が空) { error_text = 'お支払い方法を選択してください'; } ↑この状態です。

neko-desu

2022/07/30 09:36

ひとつコメントアウトしていたのが残っていました。 else if ("input:not(:checked) + label") { error_text = 'お支払い方法を選択してください'; } ↑こちらを書き、ラジオボタンを選択せずにボタンを押すと、「お支払い方法を選択してください」のエラーの表示が出ました。ですので、次はラジオボタンをひとつ選択してからボタンをクリックしてみたところ、選択しているのに「お支払い方法を選択してください」のエラーが表示されました。

CTRL-S

2022/07/30 10:01

回答ではなくヒントなのでコメントで「jQuery radio 取得」で検索してみましたか？いくらでもヒットするので、やりたい事は見つけられると思いますよ。

neko-desu

2022/07/30 10:09

ありがとうございます。 jQuery ラジオボタンの値を取得/設定するサンプル https://itsakura.com/jquery-radiobutton こちらの記事、他にも調べて読みましたが、それでもどうしても分かりませんでした。楽をしたくて書き込んでいるわけではないのです。。

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

回答1件

ベストアンサー

if(クレジットカードの値が空 && 銀行振込の値が空　&& 着払いの値が空)
の所を
if($('input:radio[name="payment"]:checked').length === 0)
としてみて下さい。

投稿2022/07/30 10:42

CTRL-S

総合スコア176

neko-desu

2022/07/30 13:37

CTRL-S様ご回答ありがとうございます。今記述しました。完璧でした。どうもありがとうございます(T T) ラジオボタンの箇所はどうしたらいいか分からず、通勤時間、休憩時間、休日にサイトや本を読み調べ、似たような記述を見つけて試していました。今日も朝から、どのように書いたらうまくいくか試していたのですが、圧倒的に理解が足りないため、応用もできず、どうにもできませんでした。（コーディングなどの勉強を始めたのが3ヶ月前）そのため質問の内容も分かりやすく書けませんでした。この度はこのような状態の質問に対して、ご親切なコメント、ご回答をいただき、また、貴重なお時間をいただきほんとうにありがとうございました。これからもこのようなことが起きても決して投げ出さず、もっと勉強します。 CTRL-S様、どうもありがとうございました。

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