JS まとめ#6

KK_2024

流れ

  1. HTMLとCSSで入力フォームの見た目を整える。　

  2.  JavaScriptで入力内容の確認を行う。

  3. 送信ボタンがクリックされたときの処理を実装する。

  4. 確認画面の見た目を作成する。

  5. 確認画面に入力されたデータを表示する処理を追加する

  6. 全体のまとめ  ←今回

ダウンロード

入力画面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>入力フォームの例</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
    <div class="container">
        <h1>入力フォーム</h1>
        <p><span class="required">*</span>は入力必須</p>
        <form id="inputForm" action="../ComfirmForm/comfirm.html">
            <div class="form-group">
                <label for="name">名前<span class="required">*</span></label>
                <input type="text" id="nameKan" name="nameKan" placeholder="例：山田　太郎" name="nameKab"  required>
                <span class="attention">漢字・ひらがな・英字のみ入力可</span>
            </div>

            <div class="form-group">
                <label for="name">読み方（ひらがな）<span class="required">*</span></label>
                <input type="text" id="nameHira" name="nameHira" placeholder="例：やまだ　たろう" name="nameHira" required>
                <span class="attention">ひらがなのみ入力可</span>
                <div id="nameHiraMessage"></div>
            </div>

            <div class="form-group">
                <label>性別</label>
                男性<input type="radio" id="male" name="gender" value="male" required>
                女性<input type="radio" id="female" name="gender" value="female" required>
                <div id="genderMessage"></div>
            </div>
            
            
            <div class="form-group">
                <label for="dob">生年月日<span class="required">*</span></label>
                <input type="date" id="YMD" name="YMD" name="YMD" required>
                <span class="attention">数字のみ入力可</span>
            </div>
            <div class="form-group">
                <label for="phone">電話番号<span class="required">*</span></label>
                <input type="tel" id="phone" name="phone" placeholder="例：080-1234-5678" name="phone" required>
            </div>
            <div class="form-group">
                <label for="email">メールアドレス<span class="required">*</span></label>
                <input type="email" id="email" name="email" placeholder="例：abcd@efgh.co.jp" name="email" required>
            </div>
            <div class="form-group">
                <label for="zipcode">郵便番号<span class="required">*</span></label>
                <input type="text" id="zipcode" name="zipcode" maxlength="8" placeholder="例：123-1234" name="zipcode" required>
                <div id="addressMessage"></div>
            </div>

            <div class="form-group">
                <label for="prefecture">住所(都道府県)<span class="required">*</span></label>
                <select id="prefecture" name="prefecture" required>
                    <option value="" disabled selected>都道府県を選択してください</option>
                </select>
            </div>

            <div class="form-group">
                <label for="city">住所(市町村)<span class="required">*</span></label>
                <input type="text" id="city" name="city" required>
            </div>

            <div class="form-group">
                <label for="address">住所(建物名・部屋番号)</label>
                <input type="text" id="building" name="building" required>
            </div>

            <div class="form-group">
                <label for="password">パスワード<span class="required">*</span></label>
                <input type="password" id="password" name="password" required>
                <span class="attention">６文字以上の半角英数字, 記号を含めて入力してください。</span>
            </div>

            <div class="form-group">
                <label for="password">パスワード<span class="required">*</span></label>
                <input type="password" id="samePassword" name="samePassword"  required>
                <span class="attention">６文字以上の半角英数字, 記号を含めて入力してください。</span>
            </div>
            <h2><div id="errorMessage" class="error-message"></div></h2>
            <button type="button" id="submitButton" onclick="submitForm()">送信</button>
        </form>
    </div>
    <script src="index.js"></script>
</body>
</html>
.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc ;
    border-radius: 5px;
}

.form-group {
    margin-bottom: 20px;
    margin-right: 20px;
}

label {
    display: block;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="date"] {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc ;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    background-color: #007bff ;
    color: #fff ;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3 ;
}

.required {
    color: red;
}

.error-message {
    color: red;
    margin-top: 10px;
}

.attention{
    color: grey;
    font-size: small;
}

select {
    font-size: 16px;
    background-color: #fff ;
    color: #000 ;
    padding: 8px;
    border: 1px solid #ccc ;
    border-radius: 4px;
}
const prefectures = [
    "北海道", "青森県", "岩手県", "宮城県", "秋田県",
    "山形県", "福島県", "茨城県", "栃木県", "群馬県",
    "埼玉県", "千葉県", "東京都", "神奈川県", "新潟県",
    "富山県", "石川県", "福井県", "山梨県", "長野県",
    "岐阜県", "静岡県", "愛知県", "三重県", "滋賀県",
    "京都府", "大阪府", "兵庫県", "奈良県", "和歌山県",
    "鳥取県", "島根県", "岡山県", "広島県", "山口県",
    "徳島県", "香川県", "愛媛県", "高知県", "福岡県",
    "佐賀県", "長崎県", "熊本県", "大分県", "宮崎県",
    "鹿児島県", "沖縄県"
];
let selectPrefecture = document.getElementById('prefecture');

prefectures.forEach(function(prefecture) {
    let option = document.createElement('option');
    option.textContent = prefecture;
    option.value = prefecture;
    selectPrefecture.appendChild(option);
});
const address = document.getElementById('zipcode');
const zipcloudURL = "https://zipcloud.ibsnet.co.jp/api/search?zipcode=";

zipcode.addEventListener('input', function() {
const zipcode = this.value.trim(); // 入力されたキーワードを取得して、前後の空白を削除する
const url = zipcloudURL + zipcode + "&limit=100";

// zipcloudからJSONデータを取得　⇒　取得後formatJSON呼び出し
fetch(url)
    .then(response => response.json())
    .then(data => {
        if (data.status !== 200) {    // エラーメッセージ有り
            // エラーの処理

        } else if (data.results === null) {    // 存在しない郵便番号
            // エラーの処理
            let addressMessage = document.getElementById("addressMessage");
            addressMessage.textContent = "有効な郵便番号を入力してください。";
        } else {
            let prefecture = document.getElementById("prefecture");
            let city = document.getElementById("city");

            // 郵便番号に対応する都道府県名が存在する場合
            if (data.results[0].address1) {
                const prefectureName = data.results[0].address1;

                // プルダウンメニューのオプションを選択状態にする
                for (let i = 0; i < prefecture.options.length; i++) {
                    if (prefecture.options[i].value === prefectureName) {
                        prefecture.selectedIndex = i;
                        break;
                    }
                }
            }
            if (data.results && data.results.length > 0) {
                city.value = data.results[0].address2 + data.results[0].address3; // 最初の住所情報のみを表示
            } else {
                city.value = ""; // 住所情報が存在しない場合は空にする
            }
            addressMessage.textContent = "";


        }
    });
});

function submitForm() {
    const errorList = new Map([
        [0, "名前(漢字)は入力必須"],
        [1, "名前(ひらがな)は入力必須"],
        [2, "生年月日は入力必須"],
        [3, "メールアドレスは入力必須"],
        [4, "郵便番号は必須項目"],
        [5, "住所は必須項目"],
        [6, "パスワードは必須項目"],
        [7, "パスワード(確認)は必須項目"],
        [8, "ひらがなで入力してください"],
        [9, "生年月日を確認してください"],
        [10, "電話番号を確認してください"],
        [11, "メールアドレスを確認してください"],
        [12, "郵便番号を確認してください"],
        [13, "パスワードが一致していません"],
    ]);

    // 各データを取得
    let nameKan = document.getElementById('nameKan').value;
    let nameHira = document.getElementById('nameHira').value;
    let maleRadio = document.getElementById("male");
    let femaleRadio = document.getElementById("female");
    let YMD = document.getElementById('YMD').value;
    let phone = document.getElementById('phone').value;
    let email = document.getElementById('email').value;
    let zipcode = document.getElementById('zipcode').value;
    let prefecture = document.getElementById('prefecture').value;
    let city = document.getElementById('city').value;
    let building = document.getElementById('building').value;
    let password = document.getElementById('password').value;
    let samePassword = document.getElementById('samePassword').value;

    // 各データがnullではないかチェック
    let checkNull = function(data, errorMessage) {
        if (data.trim() === "") {
            // エラーメッセージを表示
            let errorMessageDiv = document.getElementById("errorMessage");
            errorMessageDiv.textContent = errorMessage;
            return true;
        }
        return false;
    }

    // 各データがnullの場合の処理
    if (checkNull(nameKan, errorList.get(0)) ||
        checkNull(nameHira, errorList.get(1)) ||
        checkNull(YMD, errorList.get(2)) ||
        checkNull(phone, errorList.get(10)) ||
        checkNull(email, errorList.get(11)) ||
        checkNull(zipcode, errorList.get(12)) ||
        checkNull(prefecture, errorList.get(5)) ||
        checkNull(city, errorList.get(5)) ||
        checkNull(password, errorList.get(6)) ||
        checkNull(samePassword, errorList.get(7))) {
        // エラーがある場合は処理を中止
        return;
    }

    // 電話番号のバリデーションチェック
    if (!/^\d{10,11}$/.test(phone)) {
        let errorMessageDiv = document.getElementById("errorMessage");
        errorMessageDiv.textContent = errorList.get(10);
        return;
    }

    // メールアドレスのバリデーションチェック
    if (!/^\S+@\S+\.\S+$/.test(email)) {
        let errorMessageDiv = document.getElementById("errorMessage");
        errorMessageDiv.textContent = errorList.get(11);
        return;
    }

    // パスワードが一致しているかチェック
    if (password !== samePassword) {
        let errorMessageDiv = document.getElementById("errorMessage");
        errorMessageDiv.textContent = errorList.get(13);
        return;
    }

    // エラーメッセージがないか確認
    if (document.getElementById("addressMessage").textContent === "") {
        // エラーメッセージがない場合はフォームを送信
        document.getElementById("inputForm").submit();
    } else {
        // エラーメッセージがある場合はフォームを送信せずにユーザーに通知するなどの処理を行う
        alert("エラーメッセージがあります。修正してください。");
    }
}

確認画面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="comfirm.css">
</head>
<body>
    
    <div id="dataDisplay"></div>
    <script src="comfirm.js"></script>
</body>
</html>
.confirmation {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc ;
    border-radius: 5px;
    background-color: #f9f9f9 ;
}

.confirmation h2 {
    margin-top: 0;
}

.confirmation table {
    width: 100%;
}

.confirmation td {
    padding: 8px;
}

.confirmation td:first-child {
    font-weight: bold;
    width: 40%;
}

// URLからクエリパラメータを取得
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);

// パラメータからデータを取得
var nameKan = urlParams.get('nameKan');
var email = urlParams.get('email');
var gender = urlParams.get('gender');
    // 選択された性別を取得
    let selectedGender = "未登録";
    if (gender == "male") {
        selectedGender = "男性";
    } else if (gender== "female") {
        selectedGender = "女性";
    }
// 各データを取得
var nameKan = urlParams.get('nameKan');
var nameHira = urlParams.get('nameHira');
var YMD = urlParams.get('YMD');
var phone = urlParams.get('phone');
var email = urlParams.get('email');
var zipcode = urlParams.get('zipcode');
var prefecture = urlParams.get('prefecture');
var city = urlParams.get('city');
var building = urlParams.get('building');
var password = urlParams.get('password');

var displayHTML = `
        <div class="confirmation">
            <h2>入力内容の確認</h2>
            <table>
                <tr>
                    <td>名前（漢字）:</td>
                    <td>${nameKan}</td>
                </tr>
                <tr>
                    <td>名前（ひらがな）:</td>
                    <td>${nameHira}</td>
                </tr>
                <tr>
                    <td>性別:</td>
                    <td>${selectedGender}</td>
                </tr>
                <tr>
                    <td>日付:</td>
                    <td>${YMD}</td>
                </tr>
                <tr>
                    <td>電話番号:</td>
                    <td>${phone}</td>
                </tr>
                <tr>
                    <td>メールアドレス:</td>
                    <td>${email}</td>
                </tr>
                <tr>
                    <td>郵便番号:</td>
                    <td>${zipcode}</td>
                </tr>
                <tr>
                    <td>都道府県:</td>
                    <td>${prefecture}</td>
                </tr>
                <tr>
                    <td>市区町村:</td>
                    <td>${city}</td>
                </tr>
                <tr>
                    <td>建物名:</td>
                    <td>${building}</td>
                </tr>
                <tr>
                    <td>パスワード:</td>
                    <td>${password}</td>
                </tr>
            </table>
        </div>
    `;

// 表示用の<div>要素にHTMLを設定
document.getElementById('dataDisplay').innerHTML = displayHTML;

この記事が気に入ったらサポートをしてみませんか？