JavaScriptフォーム入力の値をチェックする方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptを使用して、フォームの入力値をチェックする方法について学びましょう。
  • この質問では、JavaScriptを使用してフォームがサブミットされた際に入力された値をチェックする方法について質問しています。
  • 特に、正しいメールアドレス形式で入力されているかどうかを確認する方法について知りたいとしています。
回答を見る
  • ベストアンサー

javascriptをはじめて勉強しているものです。

javascriptをはじめて勉強しているものです。 すみません。 以下のソースで、フォームがサブミットされたら、 inputの中身の値をチェックするものです。 chkValue()実行時、 emailアドレスの入力形式をチェックする関数をいれていますが、 こちらが、意図した動作をしません。（GETされてしまう） 原因教えていただきたいです。 お手数をお掛けしますが、どうぞよろしくお願いいたします。 <html> <head> <script type ="text/javascript"> <!-- function chkNum(T){ if(T.value.match(/[^0-9]/g)){ T.value=""; alert("数値以外は入力できません。"); } } function chkValue(){ if(document.myform.tboxInt.value.match(/[0-9]{4}/)){ document.myform.tboxInt.style.backgroundColor="#000"; }else{ alert("4桁の数字でないといけません。"); document.myform.tboxInt.style.backgroundColor="#f99"; document.myform.tboxInt.focus(); return false; } if(document.myform.tboxemail.value.match(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)){ alert("ok"); }else{ document.myform.tboxEmail.value=""; alert("正しいメールアドレス形式で入力してください。"); document.myform.tboxemail.style.backgroundColor="#f99"; document.myform.tboxemail.focus(); return false; } alert(document.myform.tboxemail.value); alert("ok2") return true; } //--> </script> </head> <body> <form name="myform" onSubmit="return chkValue()"> <table border="1"> <tr> <td>数値フィールド</td> <td><input type="text" name="tboxInt" onkeyup="chkNum(this)"></td> </tr> <tr> <td>メールアドレス</td> <td><input type="text" name="tboxemail"></td> </tr> </table> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <input type="submit" value="確認"> </form> </body> </html>

  • uff-n
  • お礼率54% (47/87)

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

  • ベストアンサー
回答No.1

とりあえず、単純な間違いを。(tboxEmail→tboxemailに訂正) document.myform.tboxEmail.value=""; ↓ document.myform.tboxemail.value="";

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

関連するQ&A

  • javascriptが得意な方ご教授ください。for文関連です。

    以下のソースにて？の部分を配列番号と同等にしたいのですが、うまくいきません。 やりたいことは配列のEbox_Div[0]～[3]の中にnullが入った場合その配列番号に対応するテキストボックスのEmail0～3には"空"と代入したいのです。 ※hiddenタグのEmail_hの値はTBLの状態によって異なります。 <script language="javascript"> function bunkatsu(){ var Ebox_Div = new Array(); Ebox_Div = document.myform.Email_h.value.split(","); document.myform.Email0.value = Ebox_Div[0]; document.myform.Email1.value = Ebox_Div[1]; document.myform.Email2.value = Ebox_Div[2]; document.myform.Email3.value = Ebox_Div[3]; for (i=0; i<4; i++){ if(Ebox_Div[i] == null){ document.myform.Email？.value = "空"; } } } </script> <body bgcolor="white" onLoad="bunkatsu()"> <form name="myform"> <input type="hidden" name="Email_h" value="aho,baka"> <table border="0" width="100%"> <tr><td width="10%">アドレス1</td><td width="90%"><input type="text" name="Email0" size="60"></td></tr> <tr><td width="10%">アドレス2</td><td width="90%"><input type="text" name="Email1" size="60"></td></tr> <tr><td width="10%">アドレス3</td><td width="90%"><input type="text" name="Email2" size="60"></td></tr> <tr><td width="10%">アドレス4</td><td width="90%"><input type="text" name="Email3" size="60"></td></tr> </table> よろしくお願い致します。

  • 配列の使い方

    JavaScript 初心者です。 下記ソースでinput type="text"でname="kazu1,name="kazu2"のように２個限定で使っているのですが将来的にＤＢから読んだ数分に変わる予定です。 その場合 eval(document.myForm.kazu1.value)+　の表現はどのように変えたらいいでしょうか。 配列の数はi7で持ってきています。 <script language="JavaScript"><!-- function ttlValue(i7){ goukei = eval(document.myForm.kazu1.value)+eval(document.myForm.kazu2.value); alert("sum "+goukei+"です"); } // --></script> </head> <table border=1> <tr> <td width="40%" ><input type="text" name="kazu1" value="10">%</td> <td width="40%" ><input type="text" name="kazu2" value="10">%</td> </tr> <tr> <td><input type="submit" name="button" value="keisan" onClick="ttlValue(2)" ></td> <td></td> </tr> </table> </form>

  • javascriptを勉強し始めました

    それで簡単なアンケートを作りたいと思い、入力フォームを作って間違えている箇所があれば確認ボタンを押したときに入力に誤りがある項目をアラートで出し、そのアラートに誤っている項目をそのアラート一つにまとめて出したいのですが、出ません。わかないので質問させていただきました。よろしくお願いします。ソースになります。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>課題</title> <script language ="javascript"> <!-- function datachk(){ if(document.form1.last.value == "") { alert("・氏名(姓)が入力されていません。"); }else{ if(document.form1.last.value.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ){ alert("・氏名(姓)は、全角文字のみで入力して下さい。"); }else{ if(document.form1.first.value == "") { alert("・名前(名)が入力されていません。"); }else{ if(document.form1.first.value.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ){ alert("・名前(名)は、全角文字のみで入力して下さい。"); } } } } } //--> </script> </head> <body> <div align="center"> 情報入力 </div><br> <br> 以下に、情報を入力してください。<br> <br> <form name = "form1"> ＊氏名（姓）： <input type = "text" name = "last" value = ""><br> （全角10字入力可）<br> ＊氏名（名）： <input type = "text" name = "first" value = ""><br> （全角10字入力可）<br> ＊性別： <input type = "radio" name = "men" value = "男">男 <input type = "radio" name = "women" value = "女">女<br> <input type="button" value="回答" onClick="javascript:datachk();"><br> </form> </body> </html>

  • javascriptによる計算

    テキストボックス「a1～6」の値とテキストボックス「b1～6」に入力された値を足し算してテキストボックス「ｃ1～6」（例…c[i] = a[i] + b[i]）を計算するJavaScriptを作成しているのですが、結果がundefinedになってしまい上手くいきません。どうやったら動くのかどうかご教授ください。 以下ソース↓ <script language ="JavaScript"> function plus() { var intResult = 0; for (i=1; i<=6; i++){ intResult[i] = 0; if (!isNaN(document.forms["A"].all["a"+i].value) && !isNaN(document.forms["B"].all["b"+i].value)){ intResult[i] += parseInt(document.forms["A"].all["a"+i].value); intResult[i] += parseInt(document.forms["B"].all["b"+i].value); } <table border = 1> <tr> <td> <table border = 1> <tr> <td> <form name="A"> <input type = "text" size = 5 name = "a1"></input> </td> <td> <input type = "text" size = 5 name = "a2"></input> </td> <td> <input type = "text" size = 5 name = "a3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "a4"></input> </td> <td> <input type = "text" size = 5 name = "a5"></input> </td> <td> <input type = "text" size = 5 name = "a6"></input> </form> </td> </tr> </table> </td> <td> <table boeder = 1> <tr> <input type = "button" onClick="plus()" value = "＋"></input> </tr> </table> </td> <td> <table border = 1> <tr> <td> <form name = "B"> <input type = "text" size = 5 name = "b1"></input> </td> <td> <input type = "text" size = 5 name = "b2"></input> </td> <td> <input type = "text" size = 5 name = "b3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "b4"></input> </td> <td> <input type = "text" size = 5 name = "b5"></input> </td> <td> <input type = "text" size = 5 name = "b6"></input> </form> </td> </tr> </table> </td> </tr> </table> 答え <form name = "C"> <table border = 1> <tr> <td> <input type = "text" size = 5 name = "c1"></input> </td> <td> <input type = "text" size = 5 name = "c2"></input> </td> <td> <input type = "text" size = 5 name = "c3"></input> </td> </tr> <tr> <td> <input type = "text" size = 5 name = "c4"></input> </td> <td> <input type = "text" size = 5 name = "c5"></input> </td> <td> <input type = "text" size = 5 name = "c6"></input> </td> </tr> </table> </form> </body> document.C.all["c"+i].value = intResult[i]; } } </script>

  • JavaScriptのロジック？

    <HTML> <HEAD> <TITLE>JavaScript</TITLE> <SCRIPT type="text/javascript"> <!-- /* 同じ値を二重表示 */ function funDouble(){ alert( document.SampleForm.nameOne.value ); document.SampleForm.nameTwe.value = document.SampleForm.nameOne.value + document.SampleForm.nameOne.value; alert(document.SampleForm.nameTwe.value); } // --> </SCRIPT> </HEAD> <BODY> <form name="SampleForm" method="POST"> <table align="center"> <TR> <TD>OnClick機能 :　<Input type="text" name="nameOne" value="Ok"><Input type="submit" value="押して！" onclick="funDouble()" ></TD> <TD>| 結果 => | </TD> <TD>　OnChange後 同じ値を２重表示 ;　<Input type="text" name="nameTwe" value="123456"></TD> </TR> </table> </form> </BODY> </HTML>

  • 教えてプログラム

    Java Scriptで自動計算を行いたいのですが、うまいくいきません もう少しだと思うのですが、修正をお願いいたします。 在庫確保数＋新規作成数＊単価=合計で算出したいです。 NuNがなるべくでないようにしたいです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J"/> <title>予約登録</title> </head> <script language="javascript"> <!-- var amount = 3; var zei; var goukei; function calc(){ var total=0; var total2=0; var i=0; var go=0; var suti1,suti2; suti1 = document.myForm.d1.value; suti2 = document.myForm.d2.value; go=parseInt(suti1)+parseInt(suti2); while(i<amount*2){ total = total + document.myForm.elements[i].value*document.myForm.elements[++i].value; i++; } document.myForm.itotal.value = total; zei = total * 0.05; zei = Math.floor(zei); goukei = total + zei; document.myForm.goukei.value = goukei*go; } //--> </script> <body　onload="calc()"> <FORM name="myForm" method="post"> <h2>予約登録</h2> <h3>商品一覧</h3> <table border="1" width="610"> <tr> <td>商品名</td> <td>単価</td> <td>販売可能数</td> <td>在庫確保数</td> <td>新規作成数</td> <td>金額合計</td> </tr> <tr> <td>稲荷寿司</td> <td>40<Input type="hidden" name="row0v" value="40"></td> <td>50</td> <td><input type="text" name="d1" onChange="calc()" value="0"></td> <td><input type="text" name="d2" onChange="calc()" value="0"></td> <td><input type="text" name="itotal" value="0"></td> </tr> <tr> <td>かんぴょう巻き</td> <td>40<input type="hidden" name="row1v" value="40"></td> <td>50</td> <td><input type="text" name="kanpyou1" onChange="calc()" value="0"></td> <td><input type="text" name="kanpyou2" onChange="calc()" value="0"></td> <td><input type="text" name="itotal2" value="0"></td> </tr> <tr> <td>おにぎり（梅干）</td> <td>90</td> <td>50</td> <td><input type="text" name="umeoni" value="0"></td> <td><input type="text" name="umeoni" value="0"></td> <td><input type="text" name="kanpyou" value="0"></td> </tr> <tr> <td colspan="5" align="right">単品合計金額</td> <td><input type="text" name="goukei" value="0"></td> </tr> </table> <tr> <td colspan="5" align="right">パッケージ合計金額</td> <td><input type="text" name="pakke" value="0"></td> </tr> <tr> <td colspan="5" align="right">総合計金額</td> <td><input type="text" name="sougoukei" value="0"></td> </tr> </table> <br> <br> <input type="submit" value="予約"> </form> </body>

  • 背景色を変えて未入力チェックをしたいのですが。。。

    アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- //　入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++) { cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == "") { cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag = BgChange(); if (flag == true){ alert("入力漏れがあるみたいよ"); } return flag; { alert("登録します、お疲れ様でした。"); } return flag; } //チェックボックス <!-- var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック＆ハイライト<BR> <FORM name="myFORM" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所：<INPUT class="white" name="Address"><BR> 氏名：<INPUT class="white" name="yourName"><BR> 年齢：<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話　<INPUT type="radio" name="電話" value="1">携帯<INPUT type="radio" name="電話" value="2">公衆電話</TD> </TR> <TR> <TD>容器　<INPUT type="radio" name="容器" value="1">ビン <INPUT type="radio" name="容器" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • formのtextフィールドが認識されない

    下記のようなフォームに対し、JavaScriptで処理を行おうとしています。 <form name="dateForm" method="post" action=""> <table> <tr><td>0</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111001'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>1</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111002'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> <tr><td>2</td> <td><input type='text' name='date[]' maxlength='8' size=12 value='20111003'></td> <td><input type='text' name='date2[]' maxlength='8' size=12 value=''></td></tr> </table> <input type='text' name='date_0' maxlength='8' size=12 value='20111000'><br><br> <input type="submit" name="button" value="Check" onClick="send_self();"> <input type="submit" name="button" value="Enter" onClick="set_action();"> </form> Checkボタン押下で上記の関数を呼び出し、テキストフィールドdate[0]の値を表示すると、(1)では「20111001」と正しい値が表示されますが、(2)では下記のエラーが出てしまいます。 「プロパティ '0' の値を取得できません: オブジェクトは Null または未定義です。」 また、 alert(document.dateForm.elements[0]); // … (3) alert(document.dateForm.date); // … (4) とすると、(3)では[object]、(4)では[undefined]と表示されます。 alert(document.dateForm.date_0.value); はvalueも正しく表示されobjectとしても正しく認識されるので、配列へのアクセスに問題があるように思うのですが…。 問題点と解決法をご存知の方がいらっしゃいましたら、どうぞよろしくお願い致します。m(＿ ＿；)m

  • 背景色を変えて未入力チェックをしたいのですが。。。

    アンケートのフォームを作っています。記入項目が多いので未入力項目の背景色を変えてチェックしたいのですがうまくいきません。 フォームの中には ・テキストボックス ・ラジオボタン ・チェックボックス があり未入力の項目について背景色を変更してます。いろいろ試してみてなんとかテキストボックスとチェックボックスの背景色は変えることができたのですがラジオボタンの背景色が変えられません。 製作途中でうまく作動しませんがイメージを載せておきますのでなんとかお願いします。 <HTML> <HEAD> <TITLE>フォーム内容の入力チェック</TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <STYLE type="text/css"> <!-- .white { BACKGROUND-COLOR: white; font-color: black } --> </STYLE> <SCRIPT language="JavaScript"> <!-- //　入力チェック function checkForm(){ cForm = document.myFORM; total = cForm.elements.length; flag = false; for (i=0; i<total; i++) { cForm.elements[i].style.backgroundColor = "#FFFFFF"; if (cForm.elements[i].value == "") { cForm.elements[i].style.backgroundColor = "#FF8080"; flag = true; } } flag = BgChange(); if (flag == true){ alert("入力漏れがあるみたいよ"); } return flag; { alert("登録します、お疲れ様でした。"); } return flag; } //チェックボックス <!-- var DefaultColorCheckbox = "#FFFFFF"; //初期状態 var ChangedColorCheckbox = "#FF8080"; //変更後 function BgChange(){ for(i=0; i<document.myFORM.chk.length; i++){ if(document.myFORM.chk[i].checked){ document.myFORM.chk[i].style.backgroundColor = DefaultColorCheckbox; } else{ document.myFORM.chk[i].style.backgroundColor = ChangedColorCheckbox; } } } // --> </SCRIPT> <META content="IBM WebSphere Studio Homepage Builder Version 11.0.2.1 Trial for Windows" name="GENERATOR"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <DIV align="center"></DIV> フォーム内容の入力チェック＆ハイライト<BR> <FORM name="myFORM" action="mailto***:@*.ne.jp" method="post"> <TABLE border="1" cellpadding="5"> <TBODY> <TR> <TD>住所：<INPUT class="white" name="Address"><BR> 氏名：<INPUT class="white" name="yourName"><BR> 年齢：<INPUT class="white" name="yourAge"></TD> </TR> <TR> <TD id="aaa">電話　<INPUT type="radio" name="電話" value="1">携帯<INPUT type="radio" name="電話" value="2">公衆電話</TD> </TR> <TR> <TD>容器　<INPUT type="radio" name="容器" value="1">ビン <INPUT type="radio" name="容器" value="2">ペットボトル</TD> </TR> <TR> <TD><INPUT type="checkbox" name="chk" value="3">火災保険<BR> <INPUT type="checkbox" name="chk" value="4">生命保険<BR> <INPUT type="checkbox" name="chk" value="5">地震保険</TD> </TR> <TR> <TD align="center"><INPUT type="button" value="登録" onclick="checkForm()"></TD> </TR> </TBODY> </TABLE> </FORM> </BODY> </HTML>

  • javascriptを使ったPWと入力の確認

    今HTMLで新規登録用のフォームを作っています。 入力欄は名前、PW, PW(再確認), メールアドレス、があり、その下に送信ボタンがあります。 まず、[送信]をクリックしたときに未入力や書式が違った場合はエラーを、 問題が無い場合は完了画面を表示させたいです。 次に、ＰＷとＰＷ（再確認）の文字列が違う場合のメッセージを出したいです。 ソースはこのような感じです <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>新規登録</title> <SCRIPT TYPE="text/javascript"> Function check() { a = document.User.A.Value; b = document.User.B.Value; c = document.User.C.Value; d = document.User.D.Value; w = ""; F = ""; if (a=="") { w = "名前"; F = "A"} if (b=="" || !b.match(/^[A-z]/)) { w += "Password"; if(F == "") F = "B"} if (c=="" || !c.match(/^[A-z]/)) { w += "Password"; if(F == "") F = "C"} if (d=="" || !d.match(/^.+@.+\..+/)) { w += "メールアドレス"; if(F == "") F = "D"} f (w!="") {alert(w+"が未入力または書式が違います。"); document.User.elements[F].focus(); return false} } </SCRIPT> </head> <body onLoad="document.User.A.focus()"> <center> <br> <form method="post" action="example.cgi" name = "User"> <table style="font-size:11pt" cellpadding="2"> <tr><td></td><td style="font-size:14pt"><B>-------新規登録-------</B> <br></td></td><td></tr> <tr><td align="right">名前:</td><td><input type="text" name="A" size="40"></td> <td>(全角)</td></tr> <tr><td align="right">Password:</td><td><input type="password" name="B" size="40"></td> <td>(半角)</td></tr> <tr><td align="right">Password(再確認):</td><td><input type="password" name="C" size="40"></td> <td>(半角)</td></tr> <tr><td align="right">メールアドレス:</td><td><input type="text" name="D" size="40"></td> <td>(半角)</td></tr> <tr><td></td><td><input type="button" value="送信" onclick="return check()"></td><td></td></tr> </table> </form> </center> </body> </html> 間違っているのは分かるのですが、何が違うか分かりません＞＜ 解答お願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する