- ベストアンサー
指定テキスト領域のエラーメッセージ出し方
- ホームページビルダVer6を使って注文書を作成中です。注文書のフォームに入力部品の一行テキスト領域を10行作って、そのうち8行を必須項目としたいのです。
- 必須項目としたテキストへの入力後、確認ボタンを押すと、入力されていない箇所を認識してメッセージを出すことは可能です。
- 必須項目が全て入力されている場合は次の確認画面に進むように設定したいです。
- sasukee
- お礼率43% (36/82)
- JavaScript
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
試しに作ってみました。 このようなものでしょうか。 <html> <head> <title></title> <script type="text/javascript"> <!-- function inputcheck(){ tgt=document.f1; errtxt=""; if (tgt.item01.value==""){ errtxt+="必須項目1,\n";} if (tgt.item02.value==""){ errtxt+="必須項目2,\n";} if (tgt.item03.value==""){ errtxt+="必須項目3,\n";} if (tgt.item04.value==""){ errtxt+="必須項目4,\n";} if (tgt.item05.value==""){ errtxt+="必須項目5,\n";} if (tgt.item06.value==""){ errtxt+="必須項目6,\n";} if (tgt.item07.value==""){ errtxt+="必須項目7,\n";} if (tgt.item08.value==""){ errtxt+="必須項目8,\n";} if (errtxt!=""){ alert (errtxt+"\n以上の項目が入力されていません。\n上記項目は必須項目ですので、\n各欄に記入してから再度お試し下さい。"); } else { tgt.submit();} } // --> </script> </head> <body> <form name="f1" action="http://***.com/***.cgi" method="post"> <ul> <li>必須項目1：<input type="text" name="item01"></li> <li>必須項目2：<input type="text" name="item02"></li> <li>必須項目3：<input type="text" name="item03"></li> <li>必須項目4：<input type="text" name="item04"></li> <li>必須項目5：<input type="text" name="item05"></li> <li>必須項目6：<input type="text" name="item06"></li> <li>必須項目7：<input type="text" name="item07"></li> <li>必須項目8：<input type="text" name="item08"></li> <li>任意項目9：<input type="text" name="item09"></li> <li>任意項目10：<input type="text" name="item10"></li> </ul> <input type="button" value="確認" onClick="inputcheck()"> </form> </body> </html> 上記のソースでは、確認ボタンをクリックすると、JavaScriptの関数inputcheck()が呼び出され、各入力必須項目のテキスト欄に入っている値が空白でないかチェックし、空白だった場合にはエラーメッセージ用の変数の中に空白だった入力項目を追記していきます。 入力必須項目のチェックが終わった後に、エラーメッセージ用の変数に何かの文字が入っていたらそれを警告メッセージとして表示し、その変数が空欄だった場合はすべての入力必須項目が入力されているものとして、そのフォームを送信します。 上記ソースでは、次の確認画面への移動をJavaScriptからformをsubmitしてやることで行っているので、HTML側のformのaction属性にそのCGIのパスを書いておけば良いでしょう。 参考になれば。
その他の回答 (1)
補足読みました。 スクリプトエラーがでているとのことですが、提示したソースそのままではエラーが出ないことを改めて確認しました。 まず、コピペした後の加工の際に、どこか余分にスクリプトの内容を消してしまったりしている部分がないかどうか、あるいは半角文字で記述しなければいけないところを全角で記述したりしていないかどうか、ソースを再確認してみて下さい。 「';'がありません」というエラー内容ですから、おそらくちょっとしたソースの記述ミスではないかと思います。 とりあえず、メッセージで指定されている行(12行目)の記述を見直してみると良いでしょう。 ただ、IEの場合は、エラーとして指摘する行が的外れな場合もありえます。 IEが指示している行周りで異常が見つからなかった場合、NetscapeなどのJavaScriptコンソールは、IEより正確かつ詳細にエラー内容を指摘してくれることが期待できますので、それらのブラウザなどでチェックしてみるのも良いと思います。 どうしてもエラー箇所がわからない場合は、script要素内のソースを現状のままコピーして提示いただければ、どこがミスなのか検証できますので、お手上げになってしまった場合は、補足してみて下さい。
お礼
有難う御座いました。 ご教示頂いたソースが大変参考になりました。 結局エラー内容もよくわからなくて、必須項目のあるフォームを新しくコピペし、教わったスクリプトを貼付て、チョコチョコプレビューを見ながら、エラーを分析していじってたらできました。 時間かかりましたが、何とか出来たので、これで安心です。 本当に、有難う御座いました。
補足
ご回答有難う御座います。 各項目を自作のテキスト名に変更し、試してみました。が、 スクリプトエラーが出てしまいました。 エラー内容 ライン 12 文字 10 エラー ';'がありません。 コード 0 です。 このエラー内容で何かわかるのでしょうか？念の為、書いてみました。 いろいろなサイトを検索してみましたのですが、エラー内容について書いてあるサイトがみつかりませんでした。ご教示いただけましたら、幸いです。