お問い合わせフォームの必須入力の制御を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.name
のname
にtest.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; } }
まだ回答がついていません
会員登録して回答してみよう