- ベストアンサー
JavaScriptを勉強し始めました！入力フォームの確認機能でエラーチェックをする方法がわかりません。
- JavaScriptを勉強し始めましたが、入力フォームの確認機能でエラーチェックをする方法がわかりません。
- 入力フォームでエラーチェックをする方法がわかりません。JavaScriptを勉強し始めたばかりで困っています。
- JavaScriptの入力フォームでエラーチェックをする方法がわからず困っています。助けてください！
- esp0402
- お礼率50% (1/2)
- インターネットビジネス
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こういう時はまず空の変数を用意して それに次々追加し、最後にそれを表示すればいい 文字列を足していくのもいいけど 今回は配列を使った var warns = []; で空の配列を用意して warns.push("文字列") で文字列を追加 最後に warns.join("\n") で追加した文字列達を\n（改行）で繋げてアラート その他はラジオボタンの仕様について ラジオボタンは同じnameを持つものが同じグループとなって その中から１つしか選べなくなる また、どのラジオボタンがチェックされてるか一発でわかる機能はない 地道に１つずつチェックされているが確かめるしかない 今回は使わなかったけど 最初からどれかにチェックを入れとけば チェックを外すことはできないので チェックされているかどうかの確認は不要になる それから２つ目は機能をまとめて抽象化した コードが長くなってくるとこれが大事になる こういう書き方もできる <!DOCTYPE html> <meta charset="UTF-8" /> <title>課題</title> <script> function datachk(form){ var warns = ""; checkNameValue("last", "氏名(姓)") checkNameValue("first", "名前(名)") function checkNameValue(elm,type){ var value = form[elm].value if(value == "") warns += "・"+type+"が入力されていません。\n"; else if(value.length > 10) warns += "・"+type+"は、10字以内で入力して下さい。\n"; else if(value.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ) warns += "・"+type+"は、全角文字のみで入力して下さい。\n"; } if(warns.length != 0) alert(warns) } </script> <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 = "gender" value = "男" checked>男 <input type = "radio" name = "gender" value = "女">女<br> <input type="button" value="回答" onClick="javascript:datachk(document.form1);"><br> </form>
その他の回答 (1)
- b0a0a
- ベストアンサー率49% (156/313)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>課題</title> <script> function datachk(){ var warns = []; var last = document.form1.last.value; var first = document.form1.first.value; var genders = document.form1.gender; var gender = "" for(var i = 0; i<genders.length; ++i){ if(genders[i].checked) gender = genders[i]; } if(last == "") warns.push("・氏名(姓)が入力されていません。"); else if(last.length > 10) warns.push("・氏名(姓)は、10字以内で入力して下さい。"); else if(last.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ) warns.push("・氏名(姓)は、全角文字のみで入力して下さい。"); if(first == "") warns.push("・名前(名)が入力されていません。"); else if(first.length > 10) warns.push("・名前(名)は、10字以内で入力して下さい。"); else if(first.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ) warns.push("・名前(名)は、全角文字のみで入力して下さい。"); if(gender == "") warns.push("・性別が選択されていません。"); if(warns.length != 0) alert( warns.join("\n") ) } </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 = "gender" value = "男">男 <input type = "radio" name = "gender" value = "女">女<br> <input type="button" value="回答" onClick="javascript:datachk();"><br> </form> </body> </html> もしくはこんな感じにもできる <script> function datachk(){ var warns = []; checkNameValue(document.form1.last, "氏名(姓)") checkNameValue(document.form1.first, "名前(名)") checkRadioValue(document.form1.gender, "性別") function getCheckedElementValue(elms) { for(var i = 0; i<elms.length; ++i) if(elms[i].checked) return elms[i]; return "" } function checkNameValue(elm,type){ var value = elm.value if(value == "") warns.push("・"+type+"が入力されていません。"); else if(value.length > 10) warns.push("・"+type+"は、10字以内で入力して下さい。"); else if(value.match( /[^一-龠ァ-ヶぁ-ゞA-Z]+/ ) ) warns.push("・"+type+"は、全角文字のみで入力して下さい。"); } function checkRadioValue(elms,type){ var checked = Array.prototype.some.call(elms, function (elm){return elm.checked} ) if(!checked) warns.push("・"+type+"が選択されていません。") } if(warns.length != 0) alert( warns.join("\n") ) } </script>
補足
ありがとうございます。自分が思っていた通りになりました。ですがわからない部分も多いので解説もお願いしたいのですがお願いできますでしょうか？
お礼
ありがとうございました。大変参考になりました。これらを別の情報入力画面に遷移するときには document.form1.action = "ファイルの飛ぶ先"; document.form1.submit(); というのはわかるのですが、とんだ先でこれら入力した情報を表示する場合はどうしたらいいのでしょうか？よければこちらも教えていただければ幸いです。