Q&A
> まずdocument.formは、おそらくdocument.formsの誤りでしょう。
提示されたHTMLの外側に<form name="form">がある、という状況を想定していました。
お問い合わせフォームの必須入力の制御をJavaScriptで作っています。
html
1 <div> 2 <label>氏名</label> 3 <input type="text" id="name" name="name"> 4 </div>
JavaScript
1 if(document.form.name.value == ""){ 2 errorElement(document.form.name, "必須項目に入力されていません"); 3 flag = false; 4 }
このコードの2行目errorElement(document.form.nameのnameにtest.nameのような.が入った名前を使用するにはどうすればよいでしょうか？
やりたいことのイメージ:
html
1 <div> 2 <label>氏名</label> 3 <input type="text" name="test.name"> 4 </div>
JavaScript
1 if(document.form.test.name.value == ""){ 2 errorElement(document.form.test.name, "必須項目に入力されていません"); 3 flag = false; 4 }
追記情報
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<title>お問い合わせフォーム</title> 6<link rel="stylesheet" href="style.css"> 7<script type="text/javascript" src="contact.js"></script> 8</head> 9<body> 10<div><h1>Company Name</h1></div> 11<div><h2>お問い合わせ</h2></div> 12<div> 13 <form action="confirm.php" method="post" name="form" onsubmit="return validate()"> 14 <h1 class="contact-title">お問い合わせ 内容入力</h1> 15 <p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p> 16 <div> 17 <div> 18 <label>お名前<span>必須</span></label> 19 <input type="text" name="test.name" placeholder="例）山田太郎" value=""> 20 </div> 21 <div> 22 <label>ふりがな<span>必須</span></label> 23 <input type="text" name="test.furigana" placeholder="例）やまだたろう" value=""> 24 </div> 25 <div> 26 <label>メールアドレス<span>必須</span></label> 27 <input type="text" name="test.email" placeholder="例）guest@example.com" value=""> 28 </div> 29 <div> 30 <label>電話番号<span>必須</span></label> 31 <input type="text" name="test.tel" placeholder="例）0000000000" value=""> 32 </div> 33 <div> 34 <label>性別<span>必須</span></label> 35 <input type="radio" name="sex" value="男性" checked> 男性 36 <input type="radio" name="sex" value="女性"> 女性 37 </div> 38 <div> 39 <label>お問い合わせ項目<span>必須</span></label> 40 <select name="item"> 41 <option value="">お問い合わせ項目を選択してください</option> 42 <option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option> 43 <option value="ご意見・ご感想">ご意見・ご感想</option> 44 </select> 45 </div> 46 <div> 47 <label>お問い合わせ内容<span>必須</span></label> 48 <textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea> 49 </div> 50 </div> 51 <button type="submit">確認画面へ</button> 52 </form> 53</div> 54</body> 55</html>
JavaScript
1var validate = function() { 2 3 var flag = true; 4 5 removeElementsByClass("error"); 6 removeClass("error-form"); 7 8 // お名前の入力をチェック 9 if(document.form["test.name"].value == ""){ 10 errorElement(document.form["test.name"], "お名前が入力されていません"); 11 flag = false; 12 } 13 14 // ふりがなの入力をチェック 15 if(document.form["test.furigana"].value == ""){ 16 errorElement(document.form["test.furigana"], "ふりがなが入力されていません"); 17 flag = false; 18 } else { 19 // メールアドレスの形式をチェック 20 if(!validateKana(document.form["test.furigana"].value)){ 21 errorElement(document.form["test.furigana"], "ひらがな以外の文字が入っています"); 22 flag = false; 23 } 24 } 25 26 // メールアドレスの入力をチェック 27 if(document.form["test.email"].value == ""){ 28 errorElement(document.form["test.email"], "メールアドレスが入力されていません"); 29 flag = false; 30 } else { 31 // メールアドレスの形式をチェック 32 if(!validateMail(document.form["test.email"].value)){ 33 errorElement(document.form["test.email"], "メールアドレスが正しくありません"); 34 flag = false; 35 } 36 } 37 38 // 電話番号の入力をチェック 39 if(document.form.tel["test.tel"] == ""){ 40 errorElement(document.form["test.tel"], "電話番号が入力されていません"); 41 flag = false; 42 } else { 43 // 電話番号の形式をチェック 44 if(!validateNumber(document.form["test.tel"].value)){ 45 errorElement(document.form["test.tel"], "半角数字のみを入力してください"); 46 flag = false; 47 } else { 48 if(!validateTel(document.form["test.tel"].value)){ 49 errorElement(document.form["test.tel"], "電話番号が正しくありません"); 50 flag = false; 51 } 52 } 53 } 54 55 // お問い合わせ項目の選択をチェック 56 if(document.form["test.item"].value == ""){ 57 errorElement(document.form["test.item"], "お問い合わせ項目が選択されていません"); 58 flag = false; 59 } 60 61 // お問い合わせ内容の入力をチェック 62 if(document.form["test.content"].value == ""){ 63 errorElement(document.form["test.content"], "お問い合わせ内容が入力されていません"); 64 flag = false; 65 } 66 67 return flag; 68} 69 70 71 72var errorElement = function(form, msg) { 73 form.className = "error-form"; 74 var newElement = document.createElement("div"); 75 newElement.className = "error"; 76 var newText = document.createTextNode(msg); 77 newElement.appendChild(newText); 78 form.parentNode.insertBefore(newElement, form.nextSibling); 79} 80 81 82var removeElementsByClass = function(className){ 83 var elements = document.getElementsByClassName(className); 84 while (elements.length > 0){ 85 elements[0].parentNode.removeChild(elements[0]); 86 } 87} 88 89var removeClass = function(className){ 90 var elements = document.getElementsByClassName(className); 91 while (elements.length > 0) { 92 elements[0].className = ""; 93 } 94} 95 96var validateMail = function (val){ 97 if (val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)==null) { 98 return false; 99 } else { 100 return true; 101 } 102} 103 104 105var validateNumber = function (val){ 106 if (val.match(/[^0-9]+/)) { 107 return false; 108 } else { 109 return true; 110 } 111} 112 113 114var validateTel = function (val){ 115 if (val.match(/^[0-9-]{6,13}$/) == null) { 116 return false; 117 } else { 118 return true; 119 } 120} 121 122 123var validateKana = function (val){ 124 if (val.match(/^[ぁ-ん]+$/) == null) { 125 return false; 126 } else { 127 return true; 128 } 129} 130
回答3件
0
ベストアンサー
そもそも論として、document.formのような形式のアクセス自体が、現代JavaScriptにはあまり適当ではありません。
document.getElementById(id文字列)などを使いましょう。
投稿2022/05/14 11:10
総合スコア146550
0
理由なく低評価がつけられた自分の回答と内容は重複してしまいますが、質問されていること
.が入った名前を使用するにはどうすればよいでしょうか？
への回答として、プロパティアクセサーについてMDNから引用して簡潔に説明しておきます。
プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。
object.property object['property']
１行目がドット表記法、２行目がブラケット表記法です。
質問の
.が入った名前を使用するにはどうすればよいでしょうか？
への回答は、ブラケット表記法を使用すればよい、ということになります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors
投稿2022/05/15 02:22
編集2022/05/15 02:25
総合スコア8402
0
まずdocument.formは、おそらくdocument.formsの誤りでしょう。
そして、それを使うならformsのプロパティとして記述すべきなのはform要素のidです。
で、そのformの子要素にアクセスするには、さらにelementsプロパティを介します。
そしてプロパティ名に . が含まれる場合は ["プロパティ名"] の記述法を使います。
HTML
1 <div> 2 <form id="form1"> 3 <label>氏名</label> 4 <input type="text" name="test.name"> 5 <button type="button" onclick="test()">送信</a> 6 </form> 7 </div>
JavaScript
1function test() { 2 if (document.forms.form1.elements["test.name"].value == "") { 3 alert("必須項目に入力されていません"); 4 } 5}
投稿2022/05/14 11:29
総合スコア8402
あ、それなら document.form["test.name"] ですね。
ご回答ありがとうございます。一応、 document.form["test.name"]でエラーは出なくなったのですが、未入力内容があっても確認画面へ進めてしまい、そこから戻ってくると赤字で未入力の警告が出てくるようになってしまいました。
errorElement(document.form.name, "必須項目に入力されていません");
ではなく、
errorElement(document.form["test.name"], "必須項目に入力されていません");
にすると、未入力があった場合に先へ進めない（正常に動作する）のですが、document.form["test.name"]にした時に挙動に違いが出る原因はわかりますでしょうか？
※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。
挙動はちょっと置いとくとして、document.form の中に name というものは見当たらないように見えるので、errorElement の第一引数として undefined を渡してしまうことになっているのでは？
この回答になぜマイナス投票が付くのだ。マイナス投票をした人は納得の行く説明をしなさい。
それから質問者は document.form.name は undefined だろうという私の指摘は理解したのか。理解しないままに動くコードさえ手に入ったらそれでもういいのか。
ブラケット表記法の追記は理解しましたが、「document.form の中に name というものは見当たらないように見える」の意図は理解できかねます。
念のためですが低評価を押したのは私ではありません。
では
errorElement(document.form.name, "必須項目に入力されていません");
のnameはどこにあるのか教えてください。
全コードは追記に載せてあります。よく読んでから回答してください。
見当たらないから聞いたのですよ。どこですか。
何か勘違いされているようですが質問者は当方です。なぜ質問に対して質問で返すのですか？論点をすり替えるのはやめましょう。
ご回答ありがとうございます。一応、 document.form["test.name"]でエラーは出なくなったのですが、未入力内容があっても確認画面へ進めてしまい、そこから戻ってくると赤字で未入力の警告が出てくるようになってしまいました。
errorElement(document.form.name, "必須項目に入力されていません");
ではなく、
errorElement(document.form["test.name"], "必須項目に入力されていません");
にすると、未入力があった場合に先へ進めない（正常に動作する）のですが、document.form["test.name"]にした時に挙動に違いが出る原因はわかりますでしょうか？
※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。
↑これに対して回答して差し上げようとしたのですが、この質問にある「document.form.name」の「name」プロパティがどこにも存在していないので答えようがない。だから聞いたのですよ。わからないのですか？
何も論点のすり替えはありません。失礼なことを言わないでください。
で、「name」はどこにあるのですか？
要するに、私が指摘した document.form.name は undefined ではないのかということは、理解できていない。理解しようとも思っていないからもういい。ということでよろしいか？
> では errorElement(document.form.name, "必須項目に入力されていません"); のnameはどこにあるのか教えてください。
「では」から先が論点のすり替えになっていますよ。追記のコードには設定されていますが、やはりお読みになっていないのですか？
存在しないものを「どこにあるのか」と聞かれても、ねぇ。
何度も申し上げますがしっかりと読んでから回答しましょうね。
> 要するに、私が指摘した document.form.name は undefined ではないのかということは、理解できていない。理解しようとも思っていないからもういい。ということでよろしいか？
論外ですね。なぜ逆ギレされているのか、さっぱりわかりません。
> 存在しないものを「どこにあるのか」と聞かれても
やっぱり無いのではないですか。だから undefined でしょう？
追記コードをお読みになっていないでしょう。
if(document.form["test.name"].value == ""){
errorElement(document.form["test.name"], "お名前が入力されていません");
flag = false;
}
こうなっていますが。
name はどこにあるのかと尋ねたら
> 全コードは追記に載せてあります。よく読んでから回答してください。
とおっしゃる。でもそこに name が見当たらないから聞いたのですよと言ったら「論点のすり替えだ」とおっしゃる。
支離滅裂ですよ。
もうやめましょう。
そのどこに document.form.name がありますか（呆れ）
ご自分で「存在しない」とおっしゃったばかりなのに…
元々 document.form.nameなんて存在しないのですがどこから出てきたのでしょう？私は追記したコードを見ろと再三言いました（呆れ）
ご回答ありがとうございます。一応、 document.form["test.name"]でエラーは出なくなったのですが、未入力内容があっても確認画面へ進めてしまい、そこから戻ってくると赤字で未入力の警告が出てくるようになってしまいました。
errorElement(document.form.name, "必須項目に入力されていません");
ではなく、
errorElement(document.form["test.name"], "必須項目に入力されていません");
にすると、未入力があった場合に先へ進めない（正常に動作する）のですが、document.form["test.name"]にした時に挙動に違いが出る原因はわかりますでしょうか？
※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。
↑これあなたがお書きになったコメントですよ。
はい、そうですよ。
一番下に※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。とあるじゃないですか。
本当に話が通じないのですね。呆れました。
errorElement(document.form.name, "必須項目に入力されていません");
errorElement(document.form["test.name"], "必須項目に入力されていません");
両者で挙動が違うのはなぜかという質問ですよねこれ。
document.form.name は過去の話なんですよ。document.form["test.name"]前提での質問なんですが？
挙動が違うのはなぜかという質問ですよね。何と何とで挙動が違うと言いたかったのですか。
普通に読めば
errorElement(document.form.name, "必須項目に入力されていません");
errorElement(document.form["test.name"], "必須項目に入力されていません");
の挙動が違うのはなぜかという質問に見えるのですが。
また卑怯な低評価が増えましたね。
質問の意図はそうですが。
> 挙動はちょっと置いとくとして、document.form の中に name というものは見当たらないように見えるので、errorElement の第一引数として undefined を渡してしまうことになっているのでは？
何が言いたいのか分かりません。
もう一度コードを整理すると以下の通りです
if(document.form.name.value == ""){
errorElement(document.form.name, "お名前が入力されていません");
flag = false;
}
if(document.form["test.name"].value == ""){
errorElement(document.form["test.name"], "お名前が入力されていません");
flag = false;
}
ですからね、前者はerrorElementという関数の第一引数にdocument.form.nameを渡しているわけですね。しかし、もしdocument.formというオブジェクトがnameというプロパティを持っていなければdocument.form.nameはundefinedとなります。そして、document.formというオブジェクトがnameというプロパティを持っていることを示すものがどこにも見当たらない。なので前述のとおりdocument.form.nameはundefinedなのではないか。であるから、関数errorElementの１番目の実引数として渡している値はundefinedになっているのではないでしょうか？と問うたわけです。これで理解できましたか？
なるほど。やっと理解しましたよ。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/15 01:24
2022/05/15 01:37
2022/05/15 02:09
2022/05/15 03:24 編集