JavaScriptでフォームのチェックをする方法と注意点

このQ&Aのポイント
  • JavaScriptを使用してフォームのチェックを行う方法と注意点について説明します。
  • フォームのname値を配列にする必要がある場合、特定の処理があることがあります。
  • 半角数字のチェックにはisNaN()関数を使用し、エラーメッセージはalert()関数で表示します。
回答を見る
  • ベストアンサー

フォームのname値を配列にしてJavaScriptでフォームのチェックをする方法

JavaScriptでフォームの半角数字のチェックをしたいのですが、 form内容をCGI(PHP)に渡すためname値を配列にしないといけないのですが、 以下のスクリプトだとエラーが出てしまいます。 *実際はif(isNaN~)と<input~>をループで書き出しており、行数が不特定なので それぞれ別のname値を使うことができない状態です。 <script language="JavaScript"> function check() { if(isNaN(document.form1.hoge[0].value)){ alert("値は半角数字で入力してください。"); return(false); } if(isNaN(document.form1.hoge[1].value)){ alert("値は半角数字で入力してください。"); return(false); } return(true); } </script> <form method="post" action="xxx.cgi" onSubmit="return check()" name="form1"> <input type="text" name="hoge[0]"> <input type="text" name="hoge[1]"> </form> 特にCGIに渡す必要がなければ <input type="text" name="hoge"> <input type="text" name="hoge"> としてやればチェックができるのですが、どうしても次の 処理があるためname値を配列にする必要があります。 解決方法がわかる方がおられましたらご教授ください。 以上よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • makokoko
  • ベストアンサー率50% (7/14)
回答No.1

かなり力業ですが、以下の方法でイケます。ええイケますとも。 function check(){  for(i=0;i<=document.all.length;i++){   try{     if(document.all[i].name.indexOf('HOGE[',0) != -1)      if(isNaN(document.all[i].value)){       alert("値は半角数字で入力してください。");       return false;      }   }catch(x){}  } } 上記のままコピー&ペーストすれば使えますが、 その際他のフィールドの名前に'HOGE['は使わないようにしてくだサイね。

polco2001
質問者

お礼

ありがとうございました! makokokoさんのスクリプトで思ったとおりの動作しました。 ついでに空白チェックも以下のようにしてみました。 if(document.all[i].value==""){ alert("値を入力してください。"); return false; } どうもありがとうございました。

関連するQ&A

  • 異なるname属性のテキストの入力チェックについて

    異なるname属性のテキストの入力チェックについて よろしくお願いします。 それぞれname属性の異なるテキスト群があるのですが、 どれかひとつに数字を入力しないと、アラートが出るようにしたいと思っています。 <form action="mail.cgi" method="post" onSubmit="return check(this);"> <input type="text" name="maru" /> <input type="text" name="sankaku" /> <input type="text" name="shikaku" /> </form> この場合のコードの記述方法をお教え頂ければ幸いです。 どうぞよろしくお願い致します。

  • 検索フォームの入力値のチェック

    以下は、いくつもある検索フォームの中のテキストボックスの一つです。 ここに、次のエラーチェックを仕込みたいのですが。 (1) 17で始まる8桁数字以外はアラートを出す。NULLもダメ。 (2) 半角数字以外が入力されたときは、フォーカスが離れた時アラートを表示NULLはOK。 (3) ここに示していないその他のフォームを含め、一個でも上記エラーがあったら   検索ボタン押下時にアラートを出し、POSTを許可しない。 いろいろエラーになったり、(1) ができてなかったりで、すみませんが 完璧にするためのアドバイスいただけないでしょうか。IE6オンリーで十分です。 <html> <head> <script type="text/javascript"> function NullCheck() { if ( document.query.numberform.value=="" ) { alert( "必ず17で始まる半角数字8桁で指定してください。\n例:17910031" ); return 1; } return false; } function NumbCheck() { var str = document.query.numberform.value; if( str.match( /[^0-9]+/ ) ) { alert("不正な値がみつかりました。"); return 1; } return 0; } /* 全部チェック */ function AllCheck() { var check = 0; check += NullCheck01(); check += nmck09(); if( check > 0 ) { return false; } return check; } </script> </head> <body> <form method="post" action="list.php" target="list" id="query" name="query"> <input value="17000000" size="10" type="text" name="numberform" onblur="NumbCheck();NullCheck();">から <input type="submit" name="exec" value="検索" onclick="return AllCheck();"> </form> </body> </html>

  • javascriptでのアラート表示

    javascriptで大変困っております。 ラジオボタン・テキストエリアにまたがったチェックアラートをだしたいのですが、うまくいきません。 <script> function form_check(f) { if (f.Q1.value == "") { alert("・未記入です!"); return false; } ・ ・ ・ if (f.Q6.value == "") { alert("・名前が未記入です!"); return false; } else return true; } function reset_conf() { if (confirm("フォーム内容をリセットします!\n\nよろしいですか?")) return true; else return false; } </script> -------- <FORM ACTION="hogehoge.cgi" METHOD="POST" onSubmit="return form_check(this)"> 教育:<INPUT TYPE="radio" NAME="Q1" VALUE="OK"> テスト:<INPUT TYPE="radio" NAME="Q2" VALUE="OK">  アンケート:<INPUT TYPE="radio" NAME="Q3" VALUE="OK"> AAA:<input name="Q4" type="text" /> BBB:<input name="Q5" type="text" /> CCC:<input name="Q6" type="text" /> <INPUT TYPE="hidden" NAME="number" VALUE="6"> <INPUT TYPE="submit" NAME="answer" VALUE="送信する"> <INPUT TYPE="reset" NAME="reset" VALUE="リセット"> </FORM> </form> ------- テキストエリアのアラートチェックは出来ない状態です。 すべてにチェックまたは、テキスト入力がされていないと送信できないようにしたいのです。 どうしたらよいでしょうか?

  • javascript フォームについて

    javascriptでフォームを作ったのですが、複数フォームの空白をチェックするにはどのようなプログラムにすればよろしいでしょうか? onsubmit="return chk1(this)でフォーム送信が押されたときにチェックを行おうと考えているのですが そのときのchk()の中身やif文の条件がわからないのです。 どのようにすれば上手くいくでしょうか? 回答よろしくお願いします。 ソースは以下のとおりです。 <script language="javascript"> function send() { document.nform.submit(); document.nform2.submit(); document.nform3.submit(); } function chk1(frm){ if(frm.elements["txt1"].value==""){ alert("解答欄に空白があります"); /* FALSEを返してフォームは送信しない */ return false; }else{ /* TRUEを返してフォーム送信 */ return true; } } </script> <form name="nform" method="POST" action="mailto:webmaster@a.com?subject=問い合せ" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="mailto:webmaster@leposystems.com?subject=問い合せ" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()" onsubmit="return chk1(this)">

  • javascript name="hoge"等に記号を使いたい

    javascriptで、クリックすると値が変わるというものを作っています。 クリックすると以下の処理を行います。 ●java script側● form1.hoge.value = 1; すると、HTMLのhogeの値が変わるというものです。 ●HTML側● <form name='form1'>  <input size='10' type='text' name='hoge' value='0'> </form> しかし、実際には、phpの処理の都合もありまして ●java script側● form1.hoge[].value = 1; ●HTML側● <form name='form1'>  <input size='10' type='text' name='hoge[]' value='0'> </form> と、カッコ[]をつけたいのですが、カッコをつけると javascriptが、エラーになってしまい、うまく動作しません。 エスケープの問題かなと思い form1.hoge\[\].value 等 試しましたが、うまくいきません。 どうすれば、カッコのついたnameに対して、 javascriptが、要求を送ることができるのでしょうか?

  • 半角英数字の判別

    お世話になります テキストフィールドにおいて半角英数字のチェックをしたいのですが・・・ 例えば『012ab』のような場合、 <script Language="JavaScript"> <!-- function checkText() { txt = document.myFORM.moto.value; if (txt.match(/[^a-z|^A-Z]/g)) alert("アルファベット以外が含まれてます"); } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkText()"> </form> では数字が入力されてるとalertされます function checkNum() { txt = document.myFORM.moto.value; for (i=0; i<txt.length; i++) { c = txt.charAt(i); if ("0123456789".indexOf(c,0) < 0) { alert("数値以外が含まれてます"); return; } } } //--> </script> <form name="myFORM"> <input type="text" name="moto"> <input type="button" value="調べる" onClick="checkNum()"> </form> ではアルファベットがあるとalertされてしまいます この2つをどのように組み合わせれば半角英数字以外であればalertされるようになるのでしょうか?

  • 複数あるチェックボックスの入力チェックするには?

    チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <script type="text/javascript"> function chNull(msg,obj) { if(!obj) return true; if((obj.type || obj[0].type) == 'checkbox'){ var flag = 0; if(obj.length){ for(var i=0; i<obj.length; i++) { if(obj[i].checked) flag = 1; } } else { if(obj.checked) flag = 1; } if(flag == 0) { alert(msg + 'を選択してください。'); return false; } } return true; } --> </script> <form method="POST" action="■.cgi" onSubmit="return chNull('チェックボックス',a);"> <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 </form> 同じnameのチェックボックス群がひとつしかないときはこれで問題ないのですが、 下記のようにnameが複数ある場合にはこのスクリプトのどの部分を変えればよいのでしょうか? <input type="checkbox" name="a" value="A1" />A1 <input type="checkbox" name="a" value="A2" />A2 <input type="checkbox" name="b" value="B1" />B1 <input type="checkbox" name="b" value="B2" />B2 <input type="checkbox" name="c" value="C1" />C1 <input type="checkbox" name="c" value="C2" />C2 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。

  • 通し番号の変数を一括チェックするには?

    JavaScriptでフォームの入力値のチェックを行う プログラムを書いています。 OnSubmitで処理を行っているのですが、チェック対象の テキストボックスが大量に存在しているので、 なんとか効率良く処理できないでしょうか? if( !NumCheck(form.text1.value) || !NumCheck(form.text2.value) || !NumCheck(form.text3.value) || /* ・・・ */ !NumCheck(form.text100.value) ) これをforか何かで回せるとベストなのですが…。 PHPのように文字列を変数名に変換する方法など、 なにか良いアプローチがありましたらご教示願います。 問題の部分抽出したHTMLを下に載せておきます。 そのままでは動きませんが、雰囲気が伝わればと。 インデントがなくてすみません。 よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript"> <!-- function submitCheck(form){ if( !NumCheck(form.text1.value) || !NumCheck(form.text2.value) || !NumCheck(form.text3.value) || /* ・・・ */ !NumCheck(form.text100.value) ) { alert('入力エラー'); return false; } return true; } function NumCheck(value){ var tmp = value.match(/[0-9]+/g); if(tmp != value) return false; return true; } //--> </script> </head> <body> <form name="form1" action="test.cgi" target=_self method="post" onSubmit="return submitCheck(this);"> <input type="text" name=text1> <input type="text" name=text2> <input type="text" name=text3> /* ・・・ */ <input type="text" name=text100> </form> </body> </html>

  • checkbox の入力チェックのやり方について

    お世話になります。 フォームにて、 javascriptで、入力チェックをおこないたいと思っています。 チェックボックスについては、どれか選択が一つでもなければ、アラートで、文字を出したいと思いますが、うまくできません。 チェックボックスの入力確認の方法を教えてください。 よろしくお願いいたします。 現在作りかけのソースは、下記の通りです。 <html> <head><title>-</title></head> <body> <form method="post" action="" onsubmit="return form_Validator(this)"> <input type="text" name="a1" size="15" maxlength="12"> <BR> <input type="checkbox" name="a1001" value="1"> <input type="checkbox" name="a1002" value="1"> <input type="submit" value="登録" name="submit"> </form> <script Language="JavaScript"> <!-- function form_Validator(doc) { if ( doc.a1.value == "" ) { alert( "BAD" ); return false; } /* a1001かa1002のチェックボックスのチェックがなければアラート----*/ return (true); } //--> </script> </body> </html>

  • 年月日のチェックなんですが…

    いつもお世話になっております。 数日に渡り、あれこれと模索していましたが、どうしても分からないのでご質問させて頂きます。 どなたかご教授頂ければ幸いです。 やりたい内容と致しましては、 複数あるテキストの年月日が正しいものであるかどうかのチェックをJavascriptで行いたいのですが、どうしても始めの1つしかチェックを行ってもらえず、2つ目は全くチェックがかからない状態です。 どうやればいいのでしょうか… 因みにソースは以下の様に書いてみました。 <html> <meta http-equiv="Content-Type" content="text/html;charset=EUC-JP"> <head> <title>月日チェック</title> <script language="JavaScript"><!-- function check() {  txt = document.myFORM.elements["num[]"][0].value;  txt2 = document.myFORM.elements["num[]"][1].value;  var hoge = [ txt,txt2 ];  for(i=0; i<2; i++) {   if(!hoge[i] == "") {    if(!hoge[i].match(/^\d{4}\/\d{1,2}\/\d{1,2}$/) ){     alert("開始日の入力に誤りがあります\n\n例:2009/01/01 or 2009/1/1");     return false;    }    myData = hoge[i].split("/");    var vYear = myData[0] - 0;    var vMonth = myData[1] - 1;    var vDay = myData[2] - 0;    if(vMonth >= 0 && vMonth <= 11 && vDay >= 1 && vDay <= 31){     var vDt = new Date(vYear, vMonth, vDay);     if(vDt.getFullYear() == vYear && vDt.getMonth() == vMonth && vDt.getDate() == vDay){      return true;     }else {      alert("正しい月日を入力して下さい");      return false;     }    }else {     alert("正しい月日を入力して下さい");     return false;    }   }  } } // --></script> </head> <body> <form name="myFORM" method="post" action="res.html" onSubmit="return check()"> <input type="text" size="16" name="num[]"> <br> <input type="text" size="16" name="num[]"> <input type="submit" value="調べる"> </form> </body> </html>