Q&A
プラグイン／ライブラリは公式配布サイトのURLを質問文に追記ください。（URLにはリンクを張ることができます）
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">投稿 <span class="req">必須</span></th> <td class="f_td"> <p>質問文</p> <input type="radio" name="radio" value="はい" id="yes_"><label for="yes_" class="label"> はい</label> <input type="radio" name="radio" value="いいえ" id="no_"><label for="no_" class="label"> いいえ</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">投稿 <span class="req">必須</span></th> <td class="f_td"> <p>質問/p> <input type="radio" name="radio" value="はい" id="yes_"><label for="yes_" class="label"> はい</label> <input type="radio" name="radio" value="いいえ" id="no_"><label for="no_" class="label"> いいえ</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); }
回答2件
0
動くサンプル：https://jsfiddle.net/zcx0gbmn/1/
提示のコードで動きますね。
変えた部分は <form id="form"> が無いのを足したことと、定義されていない関数 checkForm をとりあえず足したくらいです。
投稿2018/07/26 14:41
総合スコア69400
回答ありがとうございます。
提示してくださったコードを確認いたします。少々お待ちください。
申し訳ありません、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の邪魔をしているなんてことはありますでしょうか。
document.getElementsByName("yname")[0] がなければエラーになるので動かないと思いますよ。もしかしてデベロッパーツールを使っていないとか？
http://eng-entrance.com/javascript-display-error
ページを紹介してくださってありがとうございます。説明不足で申し訳ないです、ynameもpennameも実際のHTMLには書き込まれていまして、クロームのconsoleで調べると二つのJSファイルが見つかりませんと出てきますが、yname形のエラーはで出てこないみたいです。
とりあえずcheckFormが必ずtrueを返すように書き換えて問題が起こっている箇所を絞り込まれてはいかがでしょう。
返信が遅れましてすみません。
調べつつやってみます。回答ありがとうございました。
すみません、デバックのやり方を調べてもやはり基礎がないとどうやるのかわからず詰まってしまいました。
お手数でなければ一例書いていただけないでしょうか。
> 一例書いて
何を書けというんでしょう？
すでに回答しているように提示されたコードは動きます。checkFormについても必要な項目（コードに対応するinput要素）さえあれば動きます。
>checkFormが必ずtrueを返すように書き換えて
の例文といったらいいのでしょうか、大変恐縮なのですが、trueを返すには具体的に何を足せばいいのか、デバック関係で見かけるconsole.logはどこに書くべきなのかも当方わかっておりません。情報不足で書きようがないということであれば、kei344様が普段行われる基本デバックのやり方、考え方を教えていただけると幸いです。
回答に書いたURLをひらけばtrueを返すだけのコードで実装しているのが確認できると思います。
デバッグのやり方等はコメント欄だけで説明できるものでもないし、書籍等を探してください。
【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips
大変失礼いたしました。
最後まで丁寧な対応ありがとうございました。
0
こういうことでしょうか？
javascript
1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('#button a').on('click',function(e){ 5 e.preventDefault(); 6 if($('[name=radio]:radio:checked').length>0){ 7 $(this).closest('form').trigger('submit'); 8 } 9 }); 10}); 11</script> 12<form> 13<label><input type="radio" name="radio" value="はい">はい</label><br> 14<label><input type="radio" name="radio" value="いいえ">いいえ</label><br> 15<div id="button"><a href="#">投稿</a></div> 16</form>
※jQueryのURLまで追記しときました
投稿2018/07/26 08:23
編集2018/07/26 09:07
総合スコア114779
回答ありがとうございました。すみません、送信ボタンが動かなくなってしまいました。
とりあえず私のソースをコピペして動作を確認してみてください
その上で質問者さんのhtmlソースに送信トリガーになる
アンカーが無いので必ずしも私のソースと合致しないでしょう。
送信部分まで具体的なhtmlを明示ください
なんかかぶった
すみません、できる限りコピペしてみましたがダメでした。
送信部分の表記を追加いたしました。
コピペして動かないなら何をやっても動かないと思います
jQueryの部分もソースに突っ込んでおきます
再確認をお願いします。
なお追記したソース、formが抜けてれば結局送れませんよ
追記ありがとうございました。やはり動かず…
form部分は別のJSに書いてあるため載せていませんでした。
質問しておきながら大変不親切だとは思いつつ、仕事の関係上削ったHTMLやJSが大量にあります。
なんとか違反にならない程度にあげてみますので、
もう少々お待ちください。
ごめんなさい、誤解があるかもしれませんので念の為
私のソースだけを１つのhtmlファイルに書いて
実行してみてください、これが動かないならたぶん無理です
ちなみに、フォームが別の場所にあってそのidが「form」なら
$(this).closest('form').trigger('submit');
の箇所を、元のように
$('#form').trigger('submit');
とすればいけるかもしれません
すみません誤解していました。
教えてくださったものを実行すると、未選択では送信ボタンが無反応、選択時にはURLにradio=「はい」、「いいえ」が追加されました。これが動いているということでしょうか、すみません不勉強なもので…
そうなるとあとは、さっき動かないといっていた分を
$('#form').trigger('submit');
にするだけでどうしょうか？
すみません、だめみたいです…
修正したものを編集で載せてみます。
あなたの回答
tips
プレビュー
