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

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

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

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

解決済

JavaScript document.form

G14
G14

総合スコア3

JavaScript

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

3回答

0評価

1クリップ

347閲覧

投稿2022/05/14 11:05

編集2022/05/15 22:44

お問い合わせフォームの必須入力の制御をJavaScriptで作っています。

html

<div> <label>氏名</label> <input type="text" id="name" name="name"> </div>

JavaScript

if(document.form.name.value == ""){ errorElement(document.form.name, "必須項目に入力されていません"); flag = false; }

このコードの2行目errorElement(document.form.namenametest.nameのような.が入った名前を使用するにはどうすればよいでしょうか?

やりたいことのイメージ:

html

<div> <label>氏名</label> <input type="text" name="test.name"> </div>

JavaScript

if(document.form.test.name.value == ""){ errorElement(document.form.test.name, "必須項目に入力されていません"); flag = false; }

追記情報

php

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>お問い合わせフォーム</title> <link rel="stylesheet" href="style.css"> <script type="text/javascript" src="contact.js"></script> </head> <body> <div><h1>Company Name</h1></div> <div><h2>お問い合わせ</h2></div> <div> <form action="confirm.php" method="post" name="form" onsubmit="return validate()"> <h1 class="contact-title">お問い合わせ 内容入力</h1> <p>お問い合わせ内容をご入力の上、「確認画面へ」ボタンをクリックしてください。</p> <div> <div> <label>お名前<span>必須</span></label> <input type="text" name="test.name" placeholder="例)山田太郎" value=""> </div> <div> <label>ふりがな<span>必須</span></label> <input type="text" name="test.furigana" placeholder="例)やまだたろう" value=""> </div> <div> <label>メールアドレス<span>必須</span></label> <input type="text" name="test.email" placeholder="例)guest@example.com" value=""> </div> <div> <label>電話番号<span>必須</span></label> <input type="text" name="test.tel" placeholder="例)0000000000" value=""> </div> <div> <label>性別<span>必須</span></label> <input type="radio" name="sex" value="男性" checked> 男性 <input type="radio" name="sex" value="女性"> 女性 </div> <div> <label>お問い合わせ項目<span>必須</span></label> <select name="item"> <option value="">お問い合わせ項目を選択してください</option> <option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option> <option value="ご意見・ご感想">ご意見・ご感想</option> </select> </div> <div> <label>お問い合わせ内容<span>必須</span></label> <textarea name="content" rows="5" placeholder="お問合せ内容を入力"></textarea> </div> </div> <button type="submit">確認画面へ</button> </form> </div> </body> </html>

JavaScript

var validate = function() { var flag = true; removeElementsByClass("error"); removeClass("error-form"); // お名前の入力をチェック if(document.form["test.name"].value == ""){ errorElement(document.form["test.name"], "お名前が入力されていません"); flag = false; } // ふりがなの入力をチェック if(document.form["test.furigana"].value == ""){ errorElement(document.form["test.furigana"], "ふりがなが入力されていません"); flag = false; } else { // メールアドレスの形式をチェック if(!validateKana(document.form["test.furigana"].value)){ errorElement(document.form["test.furigana"], "ひらがな以外の文字が入っています"); flag = false; } } // メールアドレスの入力をチェック if(document.form["test.email"].value == ""){ errorElement(document.form["test.email"], "メールアドレスが入力されていません"); flag = false; } else { // メールアドレスの形式をチェック if(!validateMail(document.form["test.email"].value)){ errorElement(document.form["test.email"], "メールアドレスが正しくありません"); flag = false; } } // 電話番号の入力をチェック if(document.form.tel["test.tel"] == ""){ errorElement(document.form["test.tel"], "電話番号が入力されていません"); flag = false; } else { // 電話番号の形式をチェック if(!validateNumber(document.form["test.tel"].value)){ errorElement(document.form["test.tel"], "半角数字のみを入力してください"); flag = false; } else { if(!validateTel(document.form["test.tel"].value)){ errorElement(document.form["test.tel"], "電話番号が正しくありません"); flag = false; } } } // お問い合わせ項目の選択をチェック if(document.form["test.item"].value == ""){ errorElement(document.form["test.item"], "お問い合わせ項目が選択されていません"); flag = false; } // お問い合わせ内容の入力をチェック if(document.form["test.content"].value == ""){ errorElement(document.form["test.content"], "お問い合わせ内容が入力されていません"); flag = false; } return flag; } var errorElement = function(form, msg) { form.className = "error-form"; var newElement = document.createElement("div"); newElement.className = "error"; var newText = document.createTextNode(msg); newElement.appendChild(newText); form.parentNode.insertBefore(newElement, form.nextSibling); } var removeElementsByClass = function(className){ var elements = document.getElementsByClassName(className); while (elements.length > 0){ elements[0].parentNode.removeChild(elements[0]); } } var removeClass = function(className){ var elements = document.getElementsByClassName(className); while (elements.length > 0) { elements[0].className = ""; } } var validateMail = function (val){ if (val.match(/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)==null) { return false; } else { return true; } } var validateNumber = function (val){ if (val.match(/[^0-9]+/)) { return false; } else { return true; } } var validateTel = function (val){ if (val.match(/^[0-9-]{6,13}$/) == null) { return false; } else { return true; } } var validateKana = function (val){ if (val.match(/^[ぁ-ん]+$/) == null) { return false; } else { return true; } }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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