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

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

ただいまの
回答率

90.52%

  • JavaScript

    16373questions

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

  • jQuery

    6689questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4006questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • jQueryプラグイン

    497questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

ラジオボタンを必須項目にしたい

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 486

n2018

score 5

jquery.validate.jsを使ってフォームを作成しています。
チェックしないとエラー文が出るラジオボタンを設置したいのですが、うまく動いてくれません。

jquery.validate.jsのバージョンは1.9.0を使っています。
https://github.com/jquery-validation/jquery-validation/releases/tag/1.9.0

HTMLは

<table id="formtable">
                    <tr>
                        <th class="f_th">投稿&nbsp;&nbsp;<span class="req">必須</span></th>
                        <td class="f_td">
                            <p>質問文</p>
                            <input type="radio" name="radio" value="はい" id="yes_"><label for="yes_" class="label">&nbsp;&nbsp;はい</label>
                            <input type="radio" name="radio" value="いいえ" id="no_"><label for="no_" class="label">&nbsp;&nbsp;いいえ</label>

                            <div id="return_a"></div>
                        </td>
</tr>
</table>
<div id="button"><a href="javascript:void(0);">送信</a></div>


JSは

    $('#button a').click(
        function(){
        if(checkForm()){
           $("#form").submit()
    }});

    $.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
    );

    $("#form").validate({
        rules : {
            radio: {required: true}
        },
        messages: {
            radio : { required : "選択してください" }
        },
            errorPlacement: function(error, element) {
                        if(element.is(':radio'))
                        {
                            error.appendTo(element.parent());    
                        }
                        else{
                            error.insertAfter(element);    
                        }

        }
    });
});


としています。

試したこと
・rulesの方のradioにminlengthを指定
・radioを'radio[]'に書き換え
・最後のerrorPlacement〜を#return_aに結果が書き込まれるように変更

以上になります。

※<div id="return_a"></div>はエラー文が出る場所として作成

チェックボックスのやり方はたくさん出てくるのにラジオボタンについてはほとんど指南サイトが出て来ず困っています。
当方、つい昨日[let][const]を学んだくらいの知識量しか持っていません、わかりやすく教えていただけるととても助かります。

どうぞよろしくお願いいたします。

教えていただいた文をコピペさせていただき、現在はこのような状態になっています。

HTML

            <table id="formtable">
                <form id="form" enctype="multipart/form-data" onsubmit="return checkSubmit();">
                    <tr>
                        <th class="f_th">投稿&nbsp;&nbsp;<span class="req">必須</span></th>
                        <td class="f_td">
                            <p>質問/p>
                            <input type="radio" name="radio" value="はい" id="yes_"><label for="yes_" class="label">&nbsp;&nbsp;はい</label>
                            <input type="radio" name="radio" value="いいえ" id="no_"><label for="no_" class="label">&nbsp;&nbsp;いいえ</label>
                            <div id="return_a"></div>
                            <!--<label for="yes_" class="label"><input type="radio" name="radio" value="はい">はい</label><br>
<label for="no_" class="label"><input type="radio" name="radio" value="いいえ">いいえ</label><br>-->
                        </td>
                    </tr>
<!--                    <input type="button" name="button" id="button" value="送信する" onclick="return checkForm();">-->
                    <!--<div id="button"><p class="line_m">送信する</p></div>-->
<div id="button"><a href="javascript:void(0);">送信する</a></div>
<!--                    <div id="button"><a href="#">投稿</a></div>
-->                </div>
            </form>

JS

//$(function(){
//    $('#button a').click(
//        function(){
//        if(checkForm()){
//           $("#form").submit()
//    }});

$(function(){
  $('#button a').on('click',function(e){
    e.preventDefault();
    if($('[name=radio]:radio:checked').length>0){
      $('#form').trigger('submit');
    }
  });
    $.validator.addMethod(
        "regex",
        function(value, element, regexp) {
            var re = new RegExp(regexp);
            return this.optional(element) || re.test(value);
        },
        "Please check your input."
    );

    $("#form").validate({
        rules : {
            radio: {required: true}
        },
        messages: {
            radio : { required : "選択してください" }
        },
            errorPlacement: function(error, element) {
                        if(element.is(':radio'))
                        {
                            error.appendTo(element.parent());    
                        }
                        else{
                            error.insertAfter(element);    
                        }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2018/07/26 17:22

    プラグイン/ライブラリは公式配布サイトのURLを質問文に追記ください。(URLにはリンクを張ることができます)

    キャンセル

  • n2018

    2018/07/26 17:27

    失礼いたしました。ただいまリンクを追加いたしました。

    キャンセル

回答 2

+2

動くサンプル:https://jsfiddle.net/zcx0gbmn/1/


提示のコードで動きますね。
変えた部分は <form id="form"> が無いのを足したことと、定義されていない関数 checkForm をとりあえず足したくらいです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/27 11:52 編集

    回答ありがとうございます。
    提示してくださったコードを確認いたします。少々お待ちください。

    キャンセル

  • 2018/07/27 12:10

    申し訳ありません、validateが動いてくれないみたいです…
    ・別のルール
    function checkForm(){
    var yomi = document.getElementsByName("yname")[0].value;
    var pen = document.getElementsByName("penname")[0].value;
    if(pen != "" && yomi == ""){
    alert("ヨミガナを入力してください");
    return(false);
    }
    return(true);
    }
    が実はHTML内に書き込んでありまして、それがchekformの邪魔をしているなんてことはありますでしょうか。

    キャンセル

  • 2018/07/27 12:17

    document.getElementsByName("yname")[0] がなければエラーになるので動かないと思いますよ。もしかしてデベロッパーツールを使っていないとか?

    http://eng-entrance.com/javascript-display-error

    キャンセル

  • 2018/07/27 12:49

    ページを紹介してくださってありがとうございます。説明不足で申し訳ないです、ynameもpennameも実際のHTMLには書き込まれていまして、クロームのconsoleで調べると二つのJSファイルが見つかりませんと出てきますが、yname形のエラーはで出てこないみたいです。

    キャンセル

  • 2018/07/27 16:47

    とりあえずcheckFormが必ずtrueを返すように書き換えて問題が起こっている箇所を絞り込まれてはいかがでしょう。

    キャンセル

  • 2018/07/30 14:30

    返信が遅れましてすみません。
    調べつつやってみます。回答ありがとうございました。

    キャンセル

  • 2018/08/03 12:03

    すみません、デバックのやり方を調べてもやはり基礎がないとどうやるのかわからず詰まってしまいました。
    お手数でなければ一例書いていただけないでしょうか。

    キャンセル

  • 2018/08/03 12:19

    > 一例書いて
    何を書けというんでしょう?
    すでに回答しているように提示されたコードは動きます。checkFormについても必要な項目(コードに対応するinput要素)さえあれば動きます。

    キャンセル

  • 2018/08/03 12:29

    >checkFormが必ずtrueを返すように書き換えて
    の例文といったらいいのでしょうか、大変恐縮なのですが、trueを返すには具体的に何を足せばいいのか、デバック関係で見かけるconsole.logはどこに書くべきなのかも当方わかっておりません。情報不足で書きようがないということであれば、kei344様が普段行われる基本デバックのやり方、考え方を教えていただけると幸いです。

    キャンセル

  • 2018/08/03 14:34

    回答に書いたURLをひらけばtrueを返すだけのコードで実装しているのが確認できると思います。
    デバッグのやり方等はコメント欄だけで説明できるものでもないし、書籍等を探してください。

    【質問するときのヒント|teratail(テラテイル)】
    https://teratail.com/help/question-tips

    キャンセル

  • 2018/08/03 15:10

    大変失礼いたしました。
    最後まで丁寧な対応ありがとうございました。

    キャンセル

0

こういうことでしょうか?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#button a').on('click',function(e){
    e.preventDefault();
    if($('[name=radio]:radio:checked').length>0){
      $(this).closest('form').trigger('submit');
    }
  });
});
</script>
<form>
<label><input type="radio" name="radio" value="はい">はい</label><br>
<label><input type="radio" name="radio" value="いいえ">いいえ</label><br>
<div id="button"><a href="#">投稿</a></div>
</form>


※jQueryのURLまで追記しときました

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/26 17:36

    回答ありがとうございました。すみません、送信ボタンが動かなくなってしまいました。

    キャンセル

  • 2018/07/26 17:43

    とりあえず私のソースをコピペして動作を確認してみてください
    その上で質問者さんのhtmlソースに送信トリガーになる
    アンカーが無いので必ずしも私のソースと合致しないでしょう。
    送信部分まで具体的なhtmlを明示ください

    キャンセル

  • 2018/07/26 17:43 編集

    なんかかぶった

    キャンセル

  • 2018/07/26 18:01

    すみません、できる限りコピペしてみましたがダメでした。
    送信部分の表記を追加いたしました。

    キャンセル

  • 2018/07/26 18:06

    コピペして動かないなら何をやっても動かないと思います
    jQueryの部分もソースに突っ込んでおきます
    再確認をお願いします。

    なお追記したソース、formが抜けてれば結局送れませんよ

    キャンセル

  • 2018/07/26 18:26

    追記ありがとうございました。やはり動かず…
    form部分は別のJSに書いてあるため載せていませんでした。
    質問しておきながら大変不親切だとは思いつつ、仕事の関係上削ったHTMLやJSが大量にあります。
    なんとか違反にならない程度にあげてみますので、
    もう少々お待ちください。

    キャンセル

  • 2018/07/26 18:28

    ごめんなさい、誤解があるかもしれませんので念の為

    私のソースだけを1つのhtmlファイルに書いて
    実行してみてください、これが動かないならたぶん無理です

    キャンセル

  • 2018/07/26 18:31

    ちなみに、フォームが別の場所にあってそのidが「form」なら

    $(this).closest('form').trigger('submit');
    の箇所を、元のように
    $('#form').trigger('submit');
    とすればいけるかもしれません

    キャンセル

  • 2018/07/26 18:38

    すみません誤解していました。
    教えてくださったものを実行すると、未選択では送信ボタンが無反応、選択時にはURLにradio=「はい」、「いいえ」が追加されました。これが動いているということでしょうか、すみません不勉強なもので…

    キャンセル

  • 2018/07/26 18:43

    そうなるとあとは、さっき動かないといっていた分を
    $('#form').trigger('submit');
    にするだけでどうしょうか?

    キャンセル

  • 2018/07/26 18:56

    すみません、だめみたいです…
    修正したものを編集で載せてみます。

    キャンセル

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

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16373questions

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

  • jQuery

    6689questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • HTML5

    4006questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • jQueryプラグイン

    497questions

    jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。