Javascriptの講義の課題で 〜フォームの中身をチェックするサンプル〜
フォームチェックが主な内容の最終課題でした。
そこに文字列があるかとか、textareaタグ内の文字数は30文字あるのかという内容でして。
それは大抵できたんですが、どうにかして入力して入力欄から外れたらここに文字入ってないよ＞＜というエラーメッセージをHTMLに組み込みたかったんですがうまくいかずに時間切れ。
今後完成させるべく、とりあえず今のをうｐ
追記にて
一通り仕上げて動くものにしておきました。
作ったものを昔使ってたサーバーにアップしようと思ったら、使えなくなってたので新しいところへサービスインしてきました。
使えるようになったらうｐします。
うｐ先がなぜかスクリプトが動かなかったので、やめることにしましたorz
つーかPHP使ったほうが早くね＞＜？ そんなことないかな？
DOMをはじめて調べていろいろ使ってみたけどまだ理解度が低すぎる；；
DOMの参考になりそうなページとかないかな・・・これがわかればもっと操作できるように慣れそうなんだけど。
追記(午前中)
一部動くように改造。でも根本は解決せず。
追記2(13:26)
一通り動くものを作りました。のでコードを改変。
追記3（19:38）
IE6じゃ動かないことが判明しました＞＜ もうだめぽ。
追記4(23:40)
一応思い通りのものができた。やったー！ IEでも動いた！！！
IE6とFirefox2.0.0.11で確認しています。
ってことで公開＞＜
以下ソースコード
<html> <head> <title>最終課題</title> <script language="JavaScript"> <!-- //内容チェックと同時に文字があるかないかの文章の表示。 //お名前入力欄 function form_check_name() { var form_name = document.input_form.name_text; var check_span_id = document.getElementsByTagName("SPAN").item(0); var not_value_Child = "文字が入ってません！"; var value_ok_Child = "OK！"; // alert(form_name.value); if (form_name.value == "") { check_span_id.firstChild.nodeValue = not_value_Child; } else if(form_name.value != "") { check_span_id.firstChild.nodeValue = value_ok_Child; } } //住所２入力欄 function form_check_address2() { var form_name = document.input_form.address2; var check_span_id = document.getElementsByTagName("SPAN").item(1); var not_value_Child = "文字が入ってません！"; var value_ok_Child = "OK！"; // alert(form_name.value); if (form_name.value == "") { check_span_id.firstChild.nodeValue = not_value_Child; } else if (form_name.value != "") { check_span_id.firstChild.nodeValue = value_ok_Child; } } //メールアドレス入力欄 入力確認あり function form_check_email() { var form_name = document.input_form.mail_add; var check_span_id = document.getElementsByTagName("SPAN").item(2); var not_value_Child = "文字が入ってません！"; // alert(form_name.value); if (form_name.value == "") { check_span_id.firstChild.nodeValue = not_value_Child; } else if(form_name.value.match(/[!#-9A-~]+@[a-z0-9]+\.+[a-z0-9]+/i)) { check_span_id.firstChild.nodeValue = "正しいアドレスです"; } else if (!form_name.value.match(/[!#-9A-~]+@[a-z0-9]+\.+[a-z0-9]+/i)) { check_span_id.firstChild.nodeValue = "アドレスは正しくありません。"; } // メールアドレスのチェック用。 // if (form_name.value.match(/[!#-9A-~]+@[a-z0-9]+\.+[a-z0-9]+/i)) //サイトのパクリ } //ご意見入力欄 文字制限確認表示あり function form_check_opinion() { var form_name = document.input_form.opinion; var check_span_id = document.getElementsByTagName("SPAN").item(3); var not_value_Child = "文字が入ってません！"; var value_ok_Child = "OK！"; // alert(form_name.value.length); if(form_name.value == "") { check_span_id.firstChild.nodeValue = not_value_Child; } else if(form_name.value.length < 30) { check_span_id.firstChild.nodeValue = value_ok_Child; } else if(form_name.value.length >= 31) { check_span_id.firstChild.nodeValue = "文字数が30文字までです。"; } } //入力チェックとフォームフォームデータ表示 //本当はあらかじめ作ってあるHTML（B）に書き込もうと考えたけど //このHTMLのJSからBに変更とか加えられるのか。それともJSからHTMLって新規作成できるのか。 function form_data_finalcheck_andsend() { var mail_check_value = document.input_form.mail_add.value; var opinion_check_value = document.input_form.opinion.value; if((document.input_form.name_text.value == "") || (document.input_form.address2.value == "") || (document.input_form.mail_add.value == "") || (document.input_form.opinion.value == "")){ alert("フォームに入力されていません。"); } else if(!mail_check_value.match(/[!#-9A-~]+@[a-z0-9]+\.+[a-z0-9]+/)) { alert("アドレスが正しくありません。"); } else if(opinion_check_value.length >= 31) { alert("ご意見は30文字までです。"); } else { form_data = window.open(); form_data.document.write("<html><head><title>最終課題 フォームの確認</title></head><body>"); form_data.document.write("お名前：" + document.input_form.name_text.value + "<br>"); form_data.document.write("住所：" + document.input_form.address_select.value); form_data.document.write(document.input_form.address2.value + "<br>"); form_data.document.write("メールアドレス：" + document.input_form.mail_add.value +"<br>"); form_data.document.write("ご意見：" + document.input_form.opinion.value + "<br><br>"); form_data.document.write("<form name=\"input_form\">登録ボタン"); form_data.document.write("<input type=\"button\" value=\"OK\" name=\"ok_button\">リセットボタン"); form_data.document.write("<input type=\"reset\" name=\"r_button\"><br> </form>"); form_data.document.write(" </body></html>"); } } //--> </script> </head> <body> <form name="input_form"> お名前：<input type="text" name="name_text" onkeyup="form_check_name()" onblur="form_check_name()"> <span id="check_form_name">文字が入力してください。</span><br> 住所１： <select name="address_select" size=“1” > <option value="東京都" >東京都</option> <option value="神奈川県" selected>神奈川県</option> <option value="埼玉県" >埼玉県</option> <option value="千葉県" >千葉県</option> <option value="群馬県" >群馬県</option> <option value="栃木県" >栃木県</option> </select><br> 住所２：<input type="text" name="address2" onkeyup="form_check_address2()" onblur=" form_check_address2()"> <span id="check_form_address2">文字が入力してください。</span><br> メールアドレス：<input type="text" name="mail_add" size="50" id="test2" onkeyup="form_check_email()" onblur="form_check_email()"> <span id="check_form_email">文字が入力してください。</span><br> ご意見：<input type="text" name="opinion"size="100" onkeyup="form_check_opinion()" onblur="form_check_opinion()"> <span id="check_form_opinion">文字が入力してください。</span><br> 登録ボタン<input type="button" value="OK" name="ok_button" onClick="form_data_finalcheck_andsend()"> リセットボタン<input type="reset" name="r_button"><br> </form> </body> </html>
