JAVAスクリプトでのFORM入力チェックの方法を教えてください。
ネットでいろいろ探してはめ込んだのですが、動作するプログラムが下記のしかありませんでした。
ラジオボタンの入力チェックとプルダウンの入力チェックを同時にしたいのですがよくわかりません。
今の状態ではラジオボタンをチェックしても未入力のアラートが出てしまいます。
あとこれにプルダウンの入力チェックをつけたいのですが…
すいませんがどなたか教えてください。よろしくお願いします。
function Form_Validator(theForm)
{
var flag=false;
var i;
for(i=0; i<theForm.OPT-00-06.length; i++){
if (theForm.OPT-00-06[i].checked){
flag = true; break;
}
}
if(!flag){
alert("\"OPT-00-06\" にチェックしてください。");
return (false);
}
if(confirm("入力もれはありません。")){
return (true);
}else{
return (false);
}
<form name="form1" method="POST" action="~cgi?" onsubmit="return Form_Validator(this);">
・
・
<input type="radio" name="OPT-00-06" value="A">
<input type="radio" name="OPT-00-06" value="B">
・
・
<select name="OPT-00-07">
<option value="">選択してください</option>
<option value="80">80</option>
<option value="81">81</option>
・
・
・
<select name="OPT-00-08">
<option value="">選択してください</option>
<option value="35">35cm</option>
<option value="36">36cm</option>
・
・
・
<input type="submit" value="カートに入れる" name="submit">
<input type="reset" value="内容をクリア" name="reset">
</div>
</form>
No.8ベストアンサー
- 回答日時:
汎用性がないのが気になります。
いかのようにしてみてはどうでしょうか?
<script language=javascript>
function Form_Validator(f){
var r=new Object;
//radioをチェック
for(var i=0;i<f.length;i++){
if(f[i].type=="radio"){
if(r[f[i].name]==undefined) r[f[i].name]=false;
if(r[f[i].name]==false && f[i].checked) r[f[i].name]=true;
}
}
for(var i in r){
if(r[i]==false){
alert("\""+i+"\"にチェックしてください。");
f[i][0].focus();
return false;
}
}
//selectをチェック
for(var i=0;i<f.length;i++){
if(f[i].type=="select-one" && f[i].value==""){
alert("\""+f[i].name+"\"を選択してください。");
f[i].focus();
return false;
}
}
return confirm("入力もれはありません。");
}
</script>
<form method="POST" action="~cgi" onsubmit="return Form_Validator(this)">
OPT-00-05:
<input type="radio" name="OPT-00-05" value="A">5-A
<input type="radio" name="OPT-00-05" value="B">5-B
<hr>
OPT-00-06:
<input type="radio" name="OPT-00-06" value="A">6-A
<input type="radio" name="OPT-00-06" value="B">6-B
<hr>
OPT-00-07:<select name="OPT-00-07">
<option value="">選択してください</option>
<option value="80">80</option>
<option value="81">81</option>
</select>
<hr>
OPT-00-08:<select name="OPT-00-08">
<option value="">選択してください</option>
<option value="35">35cm</option>
<option value="36">36cm</option>
</select>
<hr>
<input type="submit" value="カートに入れる" name="go">
<input type="reset" value="内容をクリア">
</div>
</form>
ちなみにformにnameをつけて管理するのは非推奨。
submitボタンにsubmitと言う名前をつけたりresetボタンにresetという
ボタンをつけるのは誤操作につながるためやめましょう。
ねんのため、#7の対処策は
form0["OPT-00-07"]とするかform0.elements["OPT-00-07"]です。
この回答への補足
毎回親切な対応をしていただき本当にありがとうございます。
またさらなる問題が出てきました。
プルダウンをAとB用意して、Aは無料でBは有料という設定にしています。AとBの中からひとつしかモノを選べない条件で、前回教えてもらったスクリプトを組み込んでいったわけです。
それで今回はBのプルダウンの前にチェックボタンをつけて、チェックすれば有料のプルダウンが有効、チェックしなければ無効。初期状態はチェックしていない無効状態にしています。
それでまたうまく動いてくれません。おそらく条件式の部分だとは思うのですが。お手数ですがまたアドバイスをお願いい致します。
<script type='text/javascript'>
<!--
function Form_Validator() {
num=0;
flag=0;
for(i=100;i<102;i++) { if(document.form1.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("方法を選択して下さい"); }
else { num += 1; }
flag=0;
if(document.form1.elements[OPT-00-07].value == "" && document.form1.elements[CNT-06].value == "1") { flag=1; }
if(document.form1.elements[OPT-00-07].value != "" && (document.form1.elements[CNT-06].value != "1" && document.form1.elements[OPT-06-01].value == "") { flag=1; }
if(document.form1.elements[OPT-00-07].value != "" && (document.form1.elements[CNT-06].value != "1" && document.form1.elements[OPT-06-01105].value != "")) { flag=1; }
if(document.form1.elements[CNT-06].value != "1" && document.form1.elements[OPT-06-01].value == "") { flag=1; }
if(flag=="1") { alert("どちらかから選択してください"); }
else { num += 1; }
if(num == "2") { form1.submit(); }
}
function fchk6(obj) {
var frm=obj.form;
var len=frm.elements.length; /* フォームの要素数 */
if(obj.checked==true){
/* チェックボックスが選択されている場合、
プルダウンを有効化(disabled=false) */
frm.elements['OPT-06-01'].disabled=false;
}else{
/* チェックボックスが選択されていない場合、
プルダウンを無効化(disabled=true) */
frm.elements['OPT-06-01'].selectedIndex=0; /* プルダウン初期化 */
frm.elements['OPT-06-01'].disabled=true;
}
}
<form action="" method="post" name="form1">
<select name="OPT-00-07"> /*無料分の選択*/
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<input type="checkbox" name="CNT-06" onClick='fchk6(this)' value="1" style="visibility: ">
<select name="OPT-06-01"> /*有料分の選択*/
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
No.7
- 回答日時:
こんにちは
OPT-00-07の『 - 』をそのまま『マイナス』として認識されてる可能性があるようですね(^^)
使うなら『 _ (shift + ろ)』を使用してください
別のnameに変えるとうまくいきました
No.6
- 回答日時:
こんにちは
条件があるのであればそれにしたがってif文を組み立てていけばいいです
A,Bどちらも選択していなければエラー、
A,B両方選択していればエラー、
それ以外ならO.K.
という感じで
<script language="javascript">
<!--
function check() {
flag = 0;
if(document.form1.f1.value == "" && document.form1.f2.value == "") { flag = 1; }
if(document.form1.f1.value != "" && document.form1.f2.value != "") { flag = 1; }
if(flag == "1") { alert("A、Bどちらかから選択してください"); }
}
//-->
</script>
<form action="" method="post" name="form1">
<select name="f1">
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<select name="f2">
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<input type="button" value="cart_in" onclick="check()">
</form>
『 && 』は『かつ(and)』、『 || 』は『または(or)』になり、
『 == 』は『イコール』、『 != 』は『ノット イコール』になります
この回答への補足
出来の悪い人間ですいません。
もう少しお付き合いください。
前回教えていただいたプログラムと組み合わせたらエラーが出ます。
ラジオのチェックはプルダウンの条件を付け加えるまでは普通に動いておりました。とりあえずフォームでのラジオボタン部品を除いた部分を記述します。すいませんがアドバイスをお願いいたします。
function Form_Validator() {
num=0;
flag=0;
for(i=100;i<102;i++) { if(document.form1.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("方法を選択して下さい"); }
else { num += 1; }
flag = 0;
if(document.form1.OPT-00-07.value == "" && document.form1.OPT-06-01.value == "") { flag = 1; }
if(document.form1.OPT-00-07.value != "" && document.form1.OPT-06-01.value != "") { flag = 1; }
if(flag == "1") { alert("Aのどちらかから選択してください"); }
else { num += 1; }
flag = 0;
if(document.form1.OPT-00-08.value == "" && document.form1.OPT-07-01.value == "") { flag = 1; }
if(document.form1.OPT-00-08.value != "" && document.form1.OPT-07-01.value != "") { flag = 1; }
if(flag == "1") { alert("Bのどちらかから選択してください"); }
else { num += 1; }
if(num == "3") { form1.submit(); }
}
//-->
</script>
<form action="" method="post" name="form1">
<select name="OPT-00-07">
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<select name="OPT-06-01">
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<select name="OPT-00-08">
<option value="">selectA</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<select name="OPT-07-01">
<option value="">selectB</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<input type="button" value="カートに入れる" onclick="Form_Validator();">
</form>
No.5
- 回答日時:
こんにちは
firefoxで試したところうまくいかなかったのでちょっと修正(--;)
<form name="forms">にしていたら『forms』だとエラーになりました
別のnameにしてください
forms.submit();
このままではsubmitされませんでしたので
document.(フォーム名).submit();
に変更してください
この回答への補足
ありがとうございました。
なんとか出来ました。本当にありがとうございました。
出来ればもう一つだけ教えてもらいたいことがあるのですが…
A、B2つのプルダウンをグループにしてチェックしたいのですが可能ですか?
たとえばA、Bともに初期値は「選択してください」となっており、Aだけ、もしくはBだけ選択すればスルー、両方選択、もしくは両方とも選択していない場合はエラーという形にしたいのです。
よろしければ教えていただけませんでしょうか?
よろしくお願いいたします。
No.4
- 回答日時:
こんにちは
if(num=="110") { forms.submit(); }
num="110" ・・・110個もチェック項目がおありで?
<input type="hidden">などでvalue値固定のものであればチェックする必要はありませんよ?
numの個数はチェック項目数の数と同じになると思います
チェックごとに
if( ) { alert(""); }
else{num += 1; }
としているならば
forms.submit();
これは(フォーム名).submit();となってますので
<form name="***" action="###.cgi" method="post">のnameを使って
***.submit();
となります
このどちらかが違うと何も反応しないかjavascriptエラーになります
(スクリプトエラー表示する設定にしていないならどちらも何も反応してないように感じると思います)
上記質問のままでしたら form1.subit(); になると思うのですがこれでsubmit出来ないのであればnumの値が違うのだと思います
No.3
- 回答日時:
こんにちは
<input type="hidden">の場合もelementsの数は増えていきます
elementsの番号は<input>ごとに増えていき<select>のときだけ<select></select>で1つのelementsとみなします
もしもっと簡単に(個別に)するのであれば
//text,passeord
if(document.forms.f1.value == "") { alert("id入力してください"); }
else { num += 1; }
//radioボタン
flag=0;
for(i=0;i<2;i++) { if(document.forms.f3[i].checked) {flag = 1;}}
if(flag=="0") { alert("ラジオ項目を選択して下さい"); }
else { num += 1; }
//selectボタン
if(document.forms.f4.value == "") { alert("セレクト項目を選択してください"); }
else { num +=1; }
という風にも出来ます
text,password,select,textereaはデフォルトがvalue=""なのでdocument.(フレーム名).(input名).valueで判別できるのですが
radio,checkboxの場合にはちょっと使いにくいかも
radioの場合は<input type="radio" value="**">とすでにvalue値が入っていますし
checkboxの場合には<input>ごとにnameが違うから・・・
for(i=0;i<2;i++) { if(document.forms.f3[i].checked) { flag=1; }}
プログラムの個数を調べる時は『1』からではなく『0』からになりますのでスタートが『i=0』となってradioの個数が2つなので(番号は『0,1』となり)終わりが『i<2』となります『i++』はループごとに1足していくということ
『i』は別にiでなくても『j』でも『n』でも自分の分かりやすいものなら何でもいいです
上のを別の書き方すると
if(document.forms.f3[0].checked) { falg=1; }
if(document.forms.f3[1].checked) { flag=1; }
となります
この回答への補足
アドバイスありがとうございました。
おかげでチェック機能は動きました。
ただ残り一箇所submit()が動きません。
最後ボタンを押したときに何も反応しないのです。
教えていただいたjavascript内の
if(num=="110") { forms.submit(); }
もしくは
<input type="button" value="カートに入れる" onclick="Form_Validator();">
どちらかをわかりやすいかたちに変更したらいけると
思うのですが…何度もすいませんが教えてください。
よろしくお願いいたします。
No.2
- 回答日時:
こんにちは
色々な種類があるときにはelementsを使う方法もあります
<script language="javascript">
<!--
function check() {
num = 0;
//textの場合
if(document.forms.elements[0].value=="") { alert("id入力してください"); }
else { num += 1; }
//passwordの場合
if(document.forms.elements[1].value=="") { alert("passwordを入力してください"); }
else { num += 1; }
//radioの場合
flag=0;
for(i=2;i<4;i++) { if(document.forms.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("ラジオ項目を選択して下さい"); }
else { num += 1; }
//selectの場合
flag=0;
if(document.forms.elements[4].selectedIndex) {flag=1;}
if(flag=="0") { alert("セレクト項目を選択してください"); }
else { num +=1; }
//checkboxの場合
flag=0;
for(i=5;i<7;i++) { if(document.forms.elements[i].checked) { flag=1; }}
if(flag=="0") { alert("チェックボックスを選択してください"); }
else { num += 1; }
if(num=="5") { forms.submit(); }
}
//-->
</script>
<form action="test.cgi" method="post" name="forms">
I D:<input type="text" name="f1">
PASS:<input type="password" name="f2">
<input type="radio" name="f3" value="radio0">0
<input type="radio" name="f3" value="radio1">1
<select name="f4">
<option value="">select</option>
<option value="select0">0</option>
<option value="select1">1</option>
</select>
<input type="checkbox" value="check0" name="f5">0
<input type="checkbox" value="check1" name="f6">1
<input type="button" value="cart_in" onclick="check()">
<input type="reset" value="クリア">
</form>
ですので今回の場合だと
<script language="javascript">
<!--
function Form_Validator() {
num=0;
flag=0;
for(i=0;i<2;i++) { if(document.form1.elements[i].checked) {flag = 1;}}
if(flag=="0") { alert("タイプを選択して下さい"); }
else { num += 1; }
flag=0;
if(document.form1.elements[2].selectedIndex) { flag=1; }
if(flag == "0") { alert("番号を選択してください"); }
else { num += 1; }
flag=0;
if(document.form1.elements[3].selectedIndex) {flag=1; }
if(flag == "0") { alert("サイズを選択してください"); }
else { num += 1; }
if(num == "3") { form1.submit(); }
}
//-->
</script>
<form name="form1" method="POST" action="~cgi?">
・
・
<input type="radio" name="OPT-00-06" value="A">
<input type="radio" name="OPT-00-06" value="B">
・
・
<select name="OPT-00-07">
<option value="">選択してください</option>
<option value="80">80</option>
<option value="81">81</option>
</select>
・
・
・
<select name="OPT-00-08">
<option value="">選択してください</option>
<option value="35">35cm</option>
<option value="36">36cm</option>
</select>
・
・
・
<input type="button" value="カートに入れる" onclick="Form_Validator();">
<input type="reset" value="内容をクリア" name="reset">
</form>
という感じになると思います
この回答への補足
ご丁寧な回答ありがとうございました。
実際試してはいるのですが、レベルが高すぎていまいちelementsがよくわかりません。
実はこのプログラム
<input type="hidden" name="ITM-01" value="order_op01">
などの隠しボタンが多々含まれており、formの部品も10項目以上存在しております。この場合、elementsを使い時は一つ一つ順番を数えていかなければいけないのでしょか?
あとradio、checkboxで使われているfor文のiとelementsのiの意味がわかりません。もしよろしければ教えてください。
よろしくお願いいたします。
No.1
- 回答日時:
こんばんは!
>var flag=false;
>if(!flag){
>alert("\"OPT-00-06\" にチェックしてください。");
>return (false);
>}
flagにfalseが入っているので!flagではtureになり、
アラートは必ずでてしまいます。
なので、
var flag = document.forms[0].OPT-00-06.value;
if (flag == null) {
alert("\"OPT-00-06\" にチェックしてください。");
return (false);
}
にしましょう!
ラジオボタンがチェックされていない場合にnullが入るのか""が
入るのか・・・確認していないので、実際試してみてください!
あとは、プルダウンも同じで、
var select01 = document.forms[0].OPT-00-07.value;
var select02 = document.forms[0].OPT-00-08.value;
if (select01 == null) {
//処理
}
if (select02 == null) {
//処理
}
でうまくいくと思います!
また、document.forms[0].コントロール名は
色々と記述の仕方があるみたいなので、上記で取得できない場合は
調べて試してください!
document.formで沢山ヒットします。
それでは、うまくいくといいですね!
この回答への補足
ご丁寧な回答ありがとうございました。
しかしこのプログラムに変えたとたん今度はアラートすら
出なくなり、スルーしてしまいます。
ちなみにdocument.formもNULLの件はすべて試しました。
javaスクリプトは奥が深すぎますね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
Selectボックスの一覧表示方法
-
select要素のvalueを配列で取得...
-
動的なセレクトボックスの生成...
-
JavascriptからSQLへ繋ぎ方が分...
-
selectを変更不可にしたい
-
JavaScriptで<select>の<option...
-
VBScriptでHTMLのセレクトボッ...
-
console.logがどうしても2つ機...
-
hiddenに値を設定する方法
-
javascriptでセレクトメニュー...
-
連想配列を使ってコンボボック...
-
javascriptでセレクトボックス...
-
selectが変更されたらnameを指...
-
まったく同じ<select>フォーム...
-
セレクトボックスで選択した内...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
データベースからのarray を j...
-
【JavaScript】プルダウンで数...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
全てのselect要素をデフォルト...
-
【JS】selectでchangeした時の...
-
javascriptでセレクトボックス...
-
Selectボックスの一覧表示方法
-
複数のプルダウンを1つにまとめ...
-
コードレビューをお願いします。
-
JavaScriptで<select>の<option...
-
<input>の選択肢をプルダウンメ...
-
select要素のvalueを配列で取得...
-
selectを変更不可にしたい
-
VBScriptでHTMLのセレクトボッ...
-
ラジオボタンとプルダウンを連...
-
javascriptで合計金額を算出し...
-
中百舌鳥駅と深井駅を入れ替え...
-
同じ名前のセレクトがある場合...
-
セレクトボックスで配列を呼び...
-
今日の日付を自動的にセレクト...
-
プルダウンの値によって活性・...
-
サイト内の物件を複数の検索条...
おすすめ情報