【Studio】フォーム入力後に確認画面を表示させる方法

<style>
  input.error {
    border-color: #BD332C !important;
    background-color: #F8D8D7 !important;
  }
  
  input.error::placeholder {
    color: #BD332C !important;
}
</style>

<script>
  

document.addEventListener("keydown", function(event) {
    if (event.key === "Enter") {
        event.preventDefault();
    }
});

// 確認画面へ表示する要素のID名
const target = ['name', 'email', 'comment'];
// 入力必須要素のID名
const isRequired = ['name', 'email'];

// 確認ボタンクリック時の処理
document.getElementById('c-btn').addEventListener('click', () => {
    let inputVal = true;
    // 必須項目のループ
    for (const elem of isRequired) {
        // 必須項目の値が空の場合の処理
        if(document.getElementById(elem).value === '') {
            inputVal = false;
            document.getElementById(elem).classList.add('error');
            document.getElementById('error-'+elem).style.display = 'block';
        // 値が存在する場合の処理
        } else {
            document.getElementById(elem).classList.remove('error');
            document.getElementById('error-'+elem).style.display = 'none';
        }
        // ID名がemailの場合の処理
        if(elem == 'email') {
            // メールアドレスの形式であるかのチェック
            if(!document.getElementById(elem).value.match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) {
                inputVal = false;
                document.getElementById(elem).classList.add('error');
                document.getElementById('error-'+elem).style.display = 'block';
            }
        }
    }

    // 必須項目チェックが全て通った場合の処理
    if(inputVal) {
        // 確認画面へ表示する要素のループ
        for (const elem of target) {
            // 確認画面の要素へテキストをセット
            document.getElementById('c-'+elem).textContent = document.getElementById(elem).value;
        }
        document.getElementById('btn').style.display = 'flex';
        document.getElementById('input-check').style.display = 'flex';
        document.getElementById('c-btn').style.display = 'none';
        document.getElementById('input').style.display = 'none';
        window.scrollTo(0, 0);
    }
});

// 戻るボタンの処理
document.getElementById('fix-btn').addEventListener('click', () => {
    document.getElementById('btn').style.display = 'none';
    document.getElementById('input-check').style.display = 'none';
    document.getElementById('c-btn').style.display = 'block';
    document.getElementById('input').style.display = 'flex';
    window.scrollTo(0, 0);
});

  </script>