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

前へ 次へ
このQ&Aのポイント
  • 検索フォームの入力値のチェック方法について紹介します。検索フォームの中のテキストボックスには、特定の条件に基づいたエラーチェックを仕込むことができます。
  • 具体的なエラーチェックとしては、17で始まる8桁の数字以外が入力された場合にアラートを表示し、NULL（空の値）も受け付けないようにします。また、半角数字以外が入力された場合にもアラートを表示しますが、NULLは許可します。
  • このエラーチェックは、検索ボタンが押された時に実行されます。一つでもエラーがある場合には、アラートを表示し、POST（データの送信）を許可しません。IE6以降のブラウザでも動作するように設定しています。
回答を見る
  • ベストアンサー

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

以下は、いくつもある検索フォームの中のテキストボックスの一つです。 ここに、次のエラーチェックを仕込みたいのですが。 (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>

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

とりあえずこんな感じですか？ <script language="javascript"> function checkForm(num){ var n=document.getElementById("numberform"); if(num=="bler" && n.value.length==0){ return false; } if( n.value.length!=8 || n.value.substr(0,2)!="17"){ alert( "必ず17で始まる半角数字8桁で指定してください。\n例：17910031" ); n.focus(); return false; } if( n.value.match( /[^0-9]+/ ) ) { alert("不正な値がみつかりました。"); n.focus(); return false; } return true; } </script> <form method="post" action="list.php" target="list" id="query" name="query" onSubmit="return checkForm('all');"> <input value="17000000" size="10" type="text" name="numberform" onblur="checkForm('bler')">から <input type="submit" name="exec" value="検索"> </form>

litton101
質問者

お礼

yambejpさん、いつもお世話になっております。 御礼遅くなってすみませんでした。 質問の仕方が悪く、まずはお詫びもうしあげます。 さて、ご教示のスクリプトをためさせていただきましたが、 実にいい感じに動作します。 本番環境にも組み込んでみて、また要望などが あったら追加質問させてください。 たぶん完璧だと思われますので、その際は締め切らせていただきます。 以上、取り急ぎ御礼まで

litton101
質問者

補足

すみません、ご提示いただいたものを以下のようにアレンジしてみたのですが 「必ず17で始まる・・」のalertが無限ループしてしまいます。 何が誤ってますでしょうか・・・ <html> <head> <script type="text/javascript"> function nmck09(num1) { var n=document.getElementById("more"); if(num1=="bler1" && n.value.length==0){ return 1; } if( n.value.length!=8 || n.value.substr(0,2)!="17"){ alert( "必ず17で始まる半角数字8桁で指定してください。\n例：17910031" ); n.focus(); return 1; } if( n.value.match( /[^0-9]+/ ) ) { alert("不正な値がみつかりました。"); n.focus(); return 1; } return true; } function nmck10(num2) { var n=document.getElementById("less"); if(num2=="bler2" && n.value.length==0){ return 1; } if( n.value.length!=8 || n.value.substr(0,2)!="17"){ alert( "必ず17で始まる半角数字8桁で指定してください。\n例：17910031" ); n.focus(); return 1; } if( n.value.match( /[^0-9]+/ ) ) { alert("不正な値がみつかりました。"); n.focus(); return 1; } return true; } // Submit時に全部チェック function AllCheck() { var check = 0; check += nmck09(); check += nmck10(); if( check > 0 ) { return false; } return check; } </script> </head> <body> <form method="post" action="list.php" target="list" id="query" name="query"> <input value="" size="10" type="text" name="more" onblur="nmck09();">から <input value="" size="10" type="text" name="less" onblur="nmck10();">まで <input type="submit" name="exec" value="検索" onclick="return AllCheck();"> </form> </body> </html>

その他の回答 (1)

  • Bonjin
  • ベストアンサー率43% (418/971)
回答No.2

もう少し具体的に何に困っているのか書くと回答が得られやすいと思います。 ＞(1) 17で始まる8桁数字以外はアラートを出す 17だけ外に固定表示させておけば、あとの６桁をチェックするだけで良さそうなのですが・・・

litton101
質問者

お礼

レスありがとうございました。 御礼遅くなってすみません。 まったくおっしゃるとおりで、なるほどと思いました。今回のケースについては、＃１さんのスクリプトを 使わせていただこうと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 入力文字チェックについて

    JavaScript初心者です。よろしくお願いします。入力された文字のチェックを行いたいと考えています。図面名を入力して、登録ボタンを押すと採番されるシステムで、1つだけ採番が可能なものと最大50個迄一括で採番が出来るものと2つあります。1つだけ採番であれば、下記にある通りで問題はないのですが、50個迄一括で採番する方ではエラーが表示されます。 エラー;'document.iform.zumen_mei.value'はNullまたはオブジェクトではありません。 入力文字チェック <SCRIPT language="JavaScript"> <!-- function zumenmeicheck() { var str = document.iform.zumen_mei.value; if( str.match( /[,，～１-９９Ａ-Ｚア-ン]+/ ) ) { alert("図面名にカンマ、～、英数字が全角で入力されている可能性があります。確認してください。"); return 1; } return 0; } function AllCheck() { var check = 0; check += zumenmeicheck(); if( check > 0 ) { return false; } return check; } //--> 図面名が最大で50個存在するもの Response.Write "<FORM NAME=""iform"" ACTION="" ./fukuzuban-2.asp"" METHOD=""POST"">" For i=1 To 50 Response.Write "<TR><TD><INPUT TYPE=""TEXT"" STYLE=""background-color:skyblue"" NAME=""zumen_mei" & i & """ MAXLENGTH=""100"" SIZE=""40"" onblur=""zumenmeicheck();"">" Next Response.Write "<INPUT TYPE=""SUBMIT"" VALUE="" 登録 "" onClick=""return AllCheck();"">" 色々と調べてはみましたが、解決出来ませんでした。何卒よろしくお願いします。

  • チェックボックスの入力チェック

    JSPでJavaScript使用しています。 no.logからテキスト(1～80までの数値がランダムに書いてある)を読みこんで、その数字でチェックボックスを作り、チェックの付いている番号を違うJSPに飛ばしています。この時どこもチェックされて無ければメッセージを表示したいのですがうまくいきません。 チェックが付いているのに、チェックされていないと認識され、メッセージが表示されてしまいます。5行目のif文が問題だと思うのですが、どうすればいいのかわかりません。アドバイス下さい。宜しく御願いします。 <script language="JavaScript"> <!-- function check(){ no = document.form1.no.value; if(no == null){ alert("チェックしてください"); return false; } } //--> </script> <form name="form1" method="post" action="test2.jsp" onSubmit="return check()"> <% String str = null; int tmpn = 0; int count = 0; BufferedReader br2 = new BufferedReader(new FileReader(getServletContext().getRealPath("/WEB-INF/no.log"))); while((str = br2.readLine()) != null) { tmpn = Integer.parseInt(str); count++; if(tmpn >= 1 && tmpn <= 9){ %> <input type="checkbox" name="no" value="<%= String.valueOf(tmpn) %>">0<%= tmpn %> <% }else{ %> <input type="checkbox" name="no" value="<%= String.valueOf(tmpn) %>"><%= tmpn %> <% if(count == 10){ out.print("<br>"); count = 0; } } } %> <input type="submit" value="送信">

  • フォームの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値を配列にする必要があります。 解決方法がわかる方がおられましたらご教授ください。 以上よろしくお願いいたします。

  • 値をチェックしたい

    まったくの初心者で困っています。 それぞれ二つのテキストに、 １．空文字不可。全角かな文字以外は不可 ２．空文字不可。数字と少数点以外は不可（全角の数字でも可） をつくりたいのですが、うまく作動しません。 実際のソースです↓ function check_null(){ var i; var tex = document.SForm.name.value; var tex1 = document.SForm.kukan.value; if(tex.length == 0||tex1.lenght == 0){ alert("入力されていません"); return false; }else if(tex ==="　" || tex1 ==="　"　|| tex ===" " || tex1 ===" "){ alert("スペースが入っています"); return false; }else{ return true; } } function checkHankaku(keyCode) { var a = keyCode; if(((a < 48) || (a > 57)) && a != 44 && a != 46 && a != 8){ alert("距離に数値以外の値が入っています"); return false; } } <html:form action="Addition.do" method="post" onsubmit="return check_null()"> <html:text maxlength="10" property="name" size="20"/><br> <html:text maxlength="5" property="kukan" size="10" onkeydown="checkHankaku(event.keyCode)"/><br> <html:submit value="送信"/> また、全角かなチェックのほうは、どうすればいいかもわからない状態なので、 何か良い方法がありましたらお願いします。

  • フォームメールでURL送信時、存在しないURLの入力を拒否したい

    xmlhttprequest.comにあるxmlhttprequest.jsを使って、 会社の問い合わせページとして、URLやコメント等を入力して 送信できるメールフォームのページを作っています。 存在しないURLを入力した場合はエラーを返すようにしたのですが、 今度は、メールフォームのコマンドが実行されなくなって しまいました。 どこがおかしいのかご教示いただきたく。 <html><head><title>お問い合せ</title> <script type="text/javascript" src="xmlhttprequest.js"></script> <script type="text/javascript"><!-- xhobj = new XMLHttpRequest(); LoadFlg = 0; function init(){ } function go(){ document.form2.Url.value = "http://www.google.co.jp/" + document.form1.Url.value; document.form2.comment.value = document.form1.comment.value; if ( all_check(document.form1) ){ document.form2.submit(); } } function all_check(form){ if( !(nullCheck(form.Url,"URLを")) ){ return false; } if( !(nullCheck(form.comment,"問合せ内容を")) ){ return false; } if( !(stateCheck(form.Url)) ){ return false; } return true; } function alert_focus(obj,str){ alert(str + "入力してください。"); obj.focus(); } function nullCheck(obj,str){ if (obj.value == "" || obj.value == null){ alert_focus(obj,str); return false; }else{ return true; } } function stateCheck(obj){ if(xhobj == null){ alert("お使いのブラウザは対応していません。"); return false; } if(LoadFlg == 0){ LoadFlg = 1; xhobj.onreadystatechange = handleXHRequest; xhobj.open("GET", "http://www.google.co.jp/"+ obj.value, true); xhobj.send(null); } else { LoadFlg = 0; xhobj.abort(); return true; } } function handleXHRequest(){ if(xhobj.readyState == 4){ if(LoadFlg == 1){ if(xhobj.status != 200){ form1.state.value=xhobj.status; alert("存在しているURLを入力してください。"); return false; } xhobj.abort(); LoadFlg = 0; } return true; } } // --></script> </head> <body onLoad="init();"> <form name="form1" id="form1" method="get" action="javascript: go();"> ページURL：http://www.google.co.jp/<input name="Url" id="Url" type="text" value=""><br> 用件：<textarea name="comment"></textarea><br> <input type="reset" value="取消"><input type="submit" value="送信"><br> ステータス確認用：<input name="state" type="text" value=""> </form> <form name="form2" id="form2" method="post" action="http://URL/mail/"> <input type="hidden" name="subject" value="問合せメール"> <input type="hidden" name="Url" value=""> <input type="hidden" name="comment" value=""> </form> </body></html>

  • htmlフォームでチェックボックスの入力漏れを警告

    チェック必須にしたいのですが、出来ません。 以下のようにnameの所に name="kurasu[1]" と入れています。 他の処理もあるので、そのような入れ方をしています。 <input type="checkbox" name="kurasu[1]" id="kurasu1" value="1" /> <input type="checkbox" name="kurasu[5]" id="kurasu5" value="5" /> <input type="checkbox" name="kurasu[8]" id="kurasu8" value="8" /> としてあるので、以下のように if(!document.form.kurasu[1].checked　&& !document.form.kurasu[5].checked && !document.form.kurasu[8].checked){ として、アラートを出したいのですが、出来ません。 やはり　kurasu[1]　では出来ないでしょうか？ 他のものは以下で処理しています。 <script type="text/javascript"> function check(){ var flag = 0; var errorMes = new Array(); var chkCount = 0; if(!document.form.tel.checked){ // 「電話番号」の記入をチェック flag = 1; errorMes.push("「電話番号」をご記入ください。\n"); } if(flag){ var n = errorMes.length; var errorStr =""; for(i=0;i<n;i++){ errorStr+= errorMes[i]; } window.alert(errorStr); // 記入漏れがあれば警告ダイアログを表示 return false; // 送信を中止 }else{ return true; // 送信を実行 } } </script>

  • チェックボックスのチェックについて

    submit時に一つでもチェックがなければアラートを表示 チェックがあれば進む・・・としたいです。 <form action=next.html name=form1> <input type=checkbox name=checkbox1 value=1> <input type=checkbox name=checkbox2 value=2> <input type=checkbox name=checkbox3 value=3> <input type=checkbox name=checkbox4 value=4> <input type=checkbox name=checkbox5 value=5> ～以下50まで続きます <input type=submit value=submit> </form> function countChecked(form1) { var total = 0; var max = 50; for (var index = 0; index < form1.checkbox.length; index++) { total += form1.checkbox[index].checked ? 1 : 0; } if(countChecked(document.form1)) > 0) { return true; } else { alert("no"); return false; } return(total); } 過去に似たような質問を参考に作ってみましたがダメでした。 チェックボックスの名前の付け方が悪いのでしょうか。

  • ピリオド区切りで 4桁.2桁.2桁 という制限が出来なくて困っています

    ピリオド区切りで 4桁.2桁.2桁 という制限が出来なくて困っています。 テキストボックスに入力される文字列の形式を制限するために、Web上で見つけたサンプルソースを参考に、次のような形でJavascriptを挿入しました。 <script type="text/javascript"> /* ピリオドチェック */ function DotCheck() { var str = document.form01.yukoduki.value; if( str.indexOf( "." ) != 4) { alert("1234.56.78　のように、ピリオド2つで区切ってご記入下さい"); document.form01.kakuninbutton.disabled = true; // 送信ボタン無効化; return 1; } return 0; } /* ２つめのピリオドチェック */ function DotCheck() { var str = document.form01.yukoduki.value; if( str.indexOf( "." ) != 6) { alert("1234.56.78　のように、ピリオド2つで区切ってご記入下さい"); document.form01.kakuninbutton.disabled = true; // 送信ボタン無効化; return 1; } return 0; } /* 半角数字チェック */ function NumberCheck() { var str = document.form01.yukoduki.value; if( str.match( /[^0-9\s.]+/ ) ) { alert("半角数字と小数点のみで入力して下さい。"); document.form01.kakuninbutton.disabled = true; // 送信ボタン無効化; return 1; } return 0; } /* 全部チェック */ function AllCheck() { var check = 0; check += NumberCheck(); check += DotCheck(); check += DotDotCheck(T); if( check > 0 ) { return false; } return true; } </script> しかし、これだと、123.456.78 のように最初のピリオドまでと２つ目のピリオドまでの桁数は制限できますが、最後の桁は何桁でも入れ放題になってしまいます。 そこで、ピリオドのチェックを２つ入れるかわりに、まとめて桁数をチェックしようと次のようなソースをソースを考えたのですが、どうも私の知識不足で間違っているようで作動しません。 /*一括ピリオドチェック */ function DotDotCheck(T) { var str = document.form01.yukoduki.value; if( !str.match(/^?d(4).?d(2).?d(2)$/)) { alert("1234.56.78　のように、ピリオド区切りで4桁.2桁.2桁でご記入下さい"); document.form01.kakuninbutton.disabled = true; // 送信ボタン無効化; return 1; } return 0; } このソース、少し直すだけで、「ピリオド区切りで4桁.2桁.2桁になっていない場合はアラート」という目的を達成できないでしょうか？ 直し方をお分かりの方がいらっしゃいましたらご教示頂きたく、どうかよろしくお願い致します。

  • フォームのチェックについて

    今、フォームの送信ボタンを押すとチェックする 関数を作成しております。 function restChar() { if(10000 < document.F1.ご質問内容.value.length) window.alert("ご質問内容は全角5,000字以内でお願いします"); } function check(){ var flag = 0; if(document.F1.name.value == ""){ // 「お名前」の入力をチェック flag = 1; } else if(document.F1.kana.value == ""){ // 「パスワード」の入力をチェック flag = 2; } else if(document.F1.mail.value == ""){ // 「コメント」の入力をチェック flag = 3; } 　　　　　else if(document.F1.ご質問内容.value == ""){ // 「コメント」の入力をチェック flag = 4; } if(flag == 1){ window.alert('お名前を入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 2){ window.alert('フリガナを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } if(flag == 3){ window.alert('メールアドレスを入力してください'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } 　　　　　if(flag == 4){ window.alert('ご質問内容を入力して下さい'); // 入力漏れがあれば警告ダイアログを表示 return false; // 送信を中止 } fOBJ = document.F1.mail.value; check = /.+@.+\..+/; if (!fOBJ.match(check)){ window.alert("メールアドレスが正しくありません"); return false; // 送信を中止 } fOBJ = document.F1.ご質問内容.value.length; if(10000 < fOBJ){ window.alert("ご質問内容は全角5,000字以内でお願いします"); return false; // 送信を中止 } return true; // 送信を実行 } こんな感じです。 1-4のチェックは問題ないのですが、 アドレスと文字数のチェックは、一度は ダイアログがでますが、連続で押すと通ってしまいます。 何がわるいのでしょうか？

    • ベストアンサー
    • Java
  • 複数あるチェックボックスの入力チェックするには？

    チェックボックスの入力チェックスクリプトを探しており、下記のようなスクリプトをネット検索で見つけました。 <!-- <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 できればこのスクリプトをベースとして使用したいと思っています。どなたかお分かりの方がいらっしゃいましたらお教え下さいませ。 よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する