teratail
回答率
86.02%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
86.02%
トップJavaScriptに関する質問
JavaScript

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

Q&A

解決済

JavaScript document.form

G14
G14

総合スコア3

JavaScript

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

3回答

0グッド

1クリップ

746閲覧

投稿2022/05/14 11:05

編集2022/05/14 12:26

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

2

ベストアンサー

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

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

投稿2022/05/14 11:10

maisumakun
maisumakun

総合スコア142217

G14, kei344が👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

G14
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
itagagaki

2022/05/15 02:09

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

2022/05/15 03:24 編集

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

1

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

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

への回答として、プロパティアクセサーについて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
itagagaki
itagagaki

総合スコア8390

G14が👍を押しています

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

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
itagagaki

総合スコア8390

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

maisumakun
maisumakun

2022/05/14 11:34

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

2022/05/14 11:38

あ、それなら document.form["test.name"] ですね。
G14
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
itagagaki

2022/05/14 13:18

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

2022/05/15 02:06 編集

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

2022/05/15 02:07 編集

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

2022/05/15 11:55

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

2022/05/15 11:59

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

2022/05/15 12:39

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

2022/05/15 12:40

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

2022/05/15 12:52

何か勘違いされているようですが質問者は当方です。なぜ質問に対して質問で返すのですか？論点をすり替えるのはやめましょう。
itagagaki
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
itagagaki

2022/05/15 13:01

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

2022/05/15 13:02

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

2022/05/15 13:08

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

2022/05/15 13:16 編集

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

2022/05/15 13:16

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

2022/05/15 13:17

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

2022/05/15 13:19

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

2022/05/15 13:20

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

2022/05/15 13:22

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

2022/05/15 13:22

元々 document.form.nameなんて存在しないのですがどこから出てきたのでしょう？私は追記したコードを見ろと再三言いました（呆れ）
itagagaki
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
G14

2022/05/15 13:24

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

2022/05/15 13:25

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

2022/05/15 13:25

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

2022/05/15 13:27

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

2022/05/15 13:28

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

2022/05/15 13:30

また卑怯な低評価が増えましたね。
G14
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
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の１番目の実引数として渡している値はundefinedになっているのではないでしょうか？と問うたわけです。これで理解できましたか？
G14
G14

2022/05/15 13:44

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

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

トップJavaScriptに関する質問

JavaScript document.form