質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1178閲覧

JavaScript document.form

G14

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/05/14 11:05

編集2022/05/15 22:44

お問い合わせフォームの必須入力の制御を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.namenametest.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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

そもそも論として、document.formのような形式のアクセス自体が、現代JavaScriptにはあまり適当ではありません。

document.getElementById(id文字列)などを使いましょう。

投稿2022/05/14 11:10

maisumakun

総合スコア145064

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

G14

2022/05/15 01:24

【HTML】 <input type="text" id="name" name="test.name"> 【JavaScript】 if(document.getElementById("name") == ""){ errorElement(document.getElementById("name"), "必須項目に入力されていません"); flag = false; } の場合、JS 2行目も document.getElementById(id文字列) でOKですか?
itagagaki

2022/05/15 02:09

低評価の理由:ソリューションを示してはいるが質問の答えにはなっていない。
maisumakun

2022/05/15 03:24 編集

> ソリューションを示してはいるが質問の答えにはなっていない。 スタンスの違いに属する部類だと思いますが、質問された方向で忠実に実装することがそもそもよろしくない場合は、それを前面に打ち出して、別な手段を提供する(あるいは、やりたいと考えていることを実行することそのものが妥当ではないことを指摘する)形で回答するようにしています。
guest

0

理由なく低評価がつけられた自分の回答と内容は重複してしまいますが、質問されていること

.が入った名前を使用するにはどうすればよいでしょうか?

への回答として、プロパティアクセサーについてMDNから引用して簡潔に説明しておきます。

プロパティアクセサーはオブジェクトのプロパティへのアクセスを提供するもので、ドット表記法またはブラケット表記法を使用します。

object.property object['property']

1行目がドット表記法、2行目がブラケット表記法です。

質問の

.が入った名前を使用するにはどうすればよいでしょうか?

への回答は、ブラケット表記法を使用すればよい、ということになります。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Property_Accessors

投稿2022/05/15 02:22

編集2022/05/15 02:25
itagagaki

総合スコア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

itagagaki

総合スコア8402

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2022/05/14 11:34

> まずdocument.formは、おそらくdocument.formsの誤りでしょう。 提示されたHTMLの外側に<form name="form">がある、という状況を想定していました。
itagagaki

2022/05/14 11:38

あ、それなら document.form["test.name"] ですね。
G14

2022/05/14 12:33 編集

ご回答ありがとうございます。一応、 document.form["test.name"]でエラーは出なくなったのですが、未入力内容があっても確認画面へ進めてしまい、そこから戻ってくると赤字で未入力の警告が出てくるようになってしまいました。 errorElement(document.form.name, "必須項目に入力されていません"); ではなく、 errorElement(document.form["test.name"], "必須項目に入力されていません"); にすると、未入力があった場合に先へ進めない(正常に動作する)のですが、document.form["test.name"]にした時に挙動に違いが出る原因はわかりますでしょうか? ※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。
itagagaki

2022/05/14 13:18

挙動はちょっと置いとくとして、document.form の中に name というものは見当たらないように見えるので、errorElement の第一引数として undefined を渡してしまうことになっているのでは?
itagagaki

2022/05/15 02:06 編集

この回答になぜマイナス投票が付くのだ。マイナス投票をした人は納得の行く説明をしなさい。
itagagaki

2022/05/15 02:07 編集

それから質問者は document.form.name は undefined だろうという私の指摘は理解したのか。理解しないままに動くコードさえ手に入ったらそれでもういいのか。
G14

2022/05/15 11:55

ブラケット表記法の追記は理解しましたが、「document.form の中に name というものは見当たらないように見える」の意図は理解できかねます。 念のためですが低評価を押したのは私ではありません。
itagagaki

2022/05/15 11:59

では errorElement(document.form.name, "必須項目に入力されていません"); のnameはどこにあるのか教えてください。
G14

2022/05/15 12:39

全コードは追記に載せてあります。よく読んでから回答してください。
itagagaki

2022/05/15 12:40

見当たらないから聞いたのですよ。どこですか。
G14

2022/05/15 12:52

何か勘違いされているようですが質問者は当方です。なぜ質問に対して質問で返すのですか?論点をすり替えるのはやめましょう。
itagagaki

2022/05/15 13:00

ご回答ありがとうございます。一応、 document.form["test.name"]でエラーは出なくなったのですが、未入力内容があっても確認画面へ進めてしまい、そこから戻ってくると赤字で未入力の警告が出てくるようになってしまいました。 errorElement(document.form.name, "必須項目に入力されていません"); ではなく、 errorElement(document.form["test.name"], "必須項目に入力されていません"); にすると、未入力があった場合に先へ進めない(正常に動作する)のですが、document.form["test.name"]にした時に挙動に違いが出る原因はわかりますでしょうか? ※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。 ↑これに対して回答して差し上げようとしたのですが、この質問にある「document.form.name」の「name」プロパティがどこにも存在していないので答えようがない。だから聞いたのですよ。わからないのですか?
itagagaki

2022/05/15 13:01

何も論点のすり替えはありません。失礼なことを言わないでください。
itagagaki

2022/05/15 13:02

で、「name」はどこにあるのですか?
itagagaki

2022/05/15 13:08

要するに、私が指摘した document.form.name は undefined ではないのかということは、理解できていない。理解しようとも思っていないからもういい。ということでよろしいか?
G14

2022/05/15 13:16 編集

> では errorElement(document.form.name, "必須項目に入力されていません"); のnameはどこにあるのか教えてください。 「では」から先が論点のすり替えになっていますよ。追記のコードには設定されていますが、やはりお読みになっていないのですか? 存在しないものを「どこにあるのか」と聞かれても、ねぇ。 何度も申し上げますがしっかりと読んでから回答しましょうね。 > 要するに、私が指摘した document.form.name は undefined ではないのかということは、理解できていない。理解しようとも思っていないからもういい。ということでよろしいか? 論外ですね。なぜ逆ギレされているのか、さっぱりわかりません。
itagagaki

2022/05/15 13:16

> 存在しないものを「どこにあるのか」と聞かれても やっぱり無いのではないですか。だから undefined でしょう?
G14

2022/05/15 13:17

追記コードをお読みになっていないでしょう。 if(document.form["test.name"].value == ""){ errorElement(document.form["test.name"], "お名前が入力されていません"); flag = false; } こうなっていますが。
itagagaki

2022/05/15 13:19

name はどこにあるのかと尋ねたら > 全コードは追記に載せてあります。よく読んでから回答してください。 とおっしゃる。でもそこに name が見当たらないから聞いたのですよと言ったら「論点のすり替えだ」とおっしゃる。 支離滅裂ですよ。 もうやめましょう。
itagagaki

2022/05/15 13:20

そのどこに document.form.name がありますか(呆れ)
itagagaki

2022/05/15 13:22

ご自分で「存在しない」とおっしゃったばかりなのに…
G14

2022/05/15 13:22

元々 document.form.nameなんて存在しないのですがどこから出てきたのでしょう?私は追記したコードを見ろと再三言いました(呆れ)
itagagaki

2022/05/15 13:23

ご回答ありがとうございます。一応、 document.form["test.name"]でエラーは出なくなったのですが、未入力内容があっても確認画面へ進めてしまい、そこから戻ってくると赤字で未入力の警告が出てくるようになってしまいました。 errorElement(document.form.name, "必須項目に入力されていません"); ではなく、 errorElement(document.form["test.name"], "必須項目に入力されていません"); にすると、未入力があった場合に先へ進めない(正常に動作する)のですが、document.form["test.name"]にした時に挙動に違いが出る原因はわかりますでしょうか? ※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。 ↑これあなたがお書きになったコメントですよ。
G14

2022/05/15 13:24

はい、そうですよ。 一番下に※質問内容の一番下に今回使用したphpとjsの全コードを追記しておきました。とあるじゃないですか。 本当に話が通じないのですね。呆れました。
itagagaki

2022/05/15 13:25

errorElement(document.form.name, "必須項目に入力されていません"); errorElement(document.form["test.name"], "必須項目に入力されていません"); 両者で挙動が違うのはなぜかという質問ですよねこれ。
G14

2022/05/15 13:25

document.form.name は過去の話なんですよ。document.form["test.name"]前提での質問なんですが?
itagagaki

2022/05/15 13:27

挙動が違うのはなぜかという質問ですよね。何と何とで挙動が違うと言いたかったのですか。
itagagaki

2022/05/15 13:28

普通に読めば errorElement(document.form.name, "必須項目に入力されていません"); errorElement(document.form["test.name"], "必須項目に入力されていません"); の挙動が違うのはなぜかという質問に見えるのですが。
itagagaki

2022/05/15 13:30

また卑怯な低評価が増えましたね。
G14

2022/05/15 13:34

質問の意図はそうですが。 > 挙動はちょっと置いとくとして、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; }
itagagaki

2022/05/15 13:39

ですからね、前者はerrorElementという関数の第一引数にdocument.form.nameを渡しているわけですね。しかし、もしdocument.formというオブジェクトがnameというプロパティを持っていなければdocument.form.nameはundefinedとなります。そして、document.formというオブジェクトがnameというプロパティを持っていることを示すものがどこにも見当たらない。なので前述のとおりdocument.form.nameはundefinedなのではないか。であるから、関数errorElementの1番目の実引数として渡している値はundefinedになっているのではないでしょうか?と問うたわけです。これで理解できましたか?
G14

2022/05/15 13:44

なるほど。やっと理解しましたよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問