JS　入力確認#2・3 [データ取得・チェック]

流れ

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

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

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

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

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

6. 全体のまとめ

2と3を分けたけど、めんどくさいから一緒にします。ゆるちて

注意：HTMLとCSSは前回のコードを参照してください。

画面

必須項目に入力がないとき、その箇所を表示する。
すべての必須項目に入力がある場合とバリデーションチェックをクリアした場合のみ画面遷移が起き、確認画面に飛ぶ。

バリデーションチェックがなぜ必要か？ - Qiita

機能

エラーパターンをまとめる。

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

他にも追加するべき。

ソースコード

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("エラーメッセージがあります。修正してください。");
    }
}