Multi Step Formを作っているのですが、必須項目が未選択や未入力であればエラーメッセージとsubmitをキャンセルさせたいのですがうまくいきません

Question

タイトル通りで、試したことはonsubmitイベントをformやボタンタグに記載してreturn falseさせてもダメでした

※Multi Step Formについて
デザイン上フォームの進捗状況がわかるサイトデザインなのですが、作る場合１ページ内で次へボタン押下後、コンテンツ内容が次のものに切り替わる進捗状況のデザインが動的に変わる内容で制作しないといけないでしょうか？

次へボタン押下後、次のHTMLページに遷移
進捗状況のデザインが次のステップ状況に変更されてる分割でのやりかたでも可能でしょうか？
jsが苦手なんので、分割版で行きたいのですが、進捗状況がわかるデザインがある場合求められているのはMulti Step Form(１ページ完結)でしょうか？

HTMLすべて
https://codepen.io/boo-jp/pen/VwzPzKW

イメージ画像

      function cancelsubmit() {
        if(document.querySelectorAll(".form-control").value === "") {
          alert("お名前を入力してください。");
          return false;
        }
      }

<form method="post" class="form formrun" action="/">
<div class="form-step form-step-active">

            <div class="p-new-registration__iteme--1 form-group d-flex align-items-center">
                <label for="inputyear" class="col-2 col-form-label">テスト</label>
                <span class="c-check u-has-display-block">必須</span>
                <div class="col-2 p-inputyear">
                    <input type="text" class="form-control" id="inputyear" placeholder="2021" name="テスト" data-formrun-required="" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">                 
                    <span class="text-danger" data-formrun-show-if-error="テスト">未入力です</span>   
                </div>
                <div class="col-1 p-year">年</div>
            </div>

            <div class="p-new-registration__iteme--1 form-group d-flex align-items-center">
                <label for="inputtext1" class="form-control-label col-2 col-form-label">テスト</label>
                <span class="c-check u-has-display-block">必須</span>
                <div class="col-6">
              <input type="text" class="form-control" id="inputtext1"  placeholder="例）" name="" data-formrun-required="" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger">      
                    <span class="text-danger" data-formrun-show-if-error="テスト">未入力です</span>
                </div>
            </div>

                <div class="col-2"><label for="exampleFormControlSelect1" class="col-form-label">テスト</label>
                </div>
                <span class="c-check u-has-display-block">必須</span>
                <div class="p-select-body u-body-flex col-9 border-bottom-solid">
                    <span class="p-select-body-sub--text u-has-inline-block">テスト</span>
                    <div class="col-9">
                        <div class="select-icon--1">
                        <select class="form-control is-empty" name="テスト" data-formrun-required="">
                            <option value="">選択ください</option>
                            <option value="01">2</option>
                            <option value="01">3</option>
                            <option value="01">4</option>
                            <option value="01">5</option>
                            </select>
                            <span class="text-danger" data-formrun-show-if-error="テスト">未選択です</span>
                        </div>
                        <div class="select-icon--2 p-tree-icon--1">
                        <select class="form-control is-empty" name="テスト" data-formrun-required="">
                            <option value="">選択ください</option>
                            <option value="01">2</option>
                            <option value="01">3</option>
                            <option value="01">4</option>
                            <option value="01">5</option>
                            </select>
                            <span class="text-danger" data-formrun-show-if-error="テスト">未選択です</span>
                        </div>
                         <div class="select-icon--3 p-tree-icon--2">
                           <select class="form-control is-empty" name="テスト" data-formrun-required="">
                            <option value="">選択ください</option>
                            <option value="01">2</option>
                            <option value="01">3</option>
                            <option value="01">4</option>
                            <option value="01">5</option>
                            </select>
                            <span class="text-danger" data-formrun-show-if-error="テスト">未選択です</span>
                        </div>
                    </div>
                </div>
            </div>

            <div class="p-new-registration__iteme--1 form-group d-flex">
                <label for="textarea1" class="col-sm-3 col-form-label"テスト</label>
                <span class="c-check u-has-display-block">必須</span>
                <div class="col-6">
                    <div class="form-group p-textarea--1" data-formrun-class-if-error="has-danger" data-formrun-target="テスト">

                    <textarea class="form-control" placeholder="" data-formrun-required="" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"></textarea>                            <span class="text-danger" data-formrun-show-if-error="お問い合わせ">内容を入力してください</span>
                    </div>
                </div>
            </div>

            <div class="p-new-registration__iteme--2 form-group d-flex">
                <label for="textarea1" class="col-sm-3 col-form-label"テスト</label>
                <span class="c-check u-has-display-block">必須</span>
                <div class="col-6">
                    <div class="form-group p-textarea--1" data-formrun-class-if-error="has-danger" data-formrun-target="テスト">

                    <textarea class="form-control" placeholder="" data-formrun-required="" data-formrun-class-if-success="form-control-success" data-formrun-class-if-error="form-control-danger"></textarea>                            <span class="text-danger" data-formrun-show-if-error="お問い合わせ">内容を入力してください</span>
                    </div>
                </div>
            </div>

        <div class="c-lead mt-small">
            <button type="submit" class="btn-next genric-btn p-genric-btn--primary mt-small u-has-display-block">次へ<i class="btn-ph-caret-right ph-caret-right"></i>
            </button>
        </div>
        <div class="c-lead mt-small">
            <button type="submit" disabled class="js-button c-genric-btn p-genric-btn--secondary u-default-border mt-small u-has-display-block">ここまでを保存する
            </button>
        </div>

        <div class="form-step">
        <div class="input-group">
          テスト
        </div>
        <div class="input-group">
          テスト
        </div>
      </div>
    </form>

.progressbar {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 2rem 0 4rem;
  counter-reset: step;
}

.progressbar::before,
.progress {
  position: absolute;
  top: 50%;
  z-index: -1;
  width: 100%;
  height: 4px;
  content: "";
  background-color: #dcdcdc;
  transform: translateY(-50%);
}

.progress {
  width: 0%;
  background-color: var(--primary-color);
  transition: .3s;
}

.progress-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1875rem;
  height: 2.1875rem;
  background-color: #dcdcdc;
  border-radius: 50%;
}

.progress-step::before {
  content: counter(step);
  counter-increment: step;
}

.progress-step::after {
  position: absolute;
  top: calc(100% + .5rem);
  font-size: .85rem;
  color: #666;
  content: attr(data-title);
}

.progress-step-active {
  color: #f3f3f3;
  background-color: var(--primary-color);
}

/* Form */

.form-step {
  display: none;
  transform-origin: top;
  animation: animate .5s;
}

.form-step-active {
  display: block;
}

.input-group {
  margin: 2rem 0;
}

/* Button */

.btns-group {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.btn {
  display: block;
  padding: .75rem;
  color: #f3f3f3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--color-border);
  border-radius: .25rem;
  transition: .3s;
}

.btn:hover {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--primary-color);
}

const prevBtns = document.querySelectorAll(".btn-prev");
  const nextBtns = document.querySelectorAll(".btn-next");
  const progress = document.getElementById("progress");
  const formSteps = document.querySelectorAll(".form-step");

  let formStepsNum = 0;

  nextBtns.forEach((btn) =>{
      btn.addEventListener("click", () =>{
        formStepsNum++;
        updateFormSteps();
      });
  });

  prevBtns.forEach((btn) =>{
    btn.addEventListener("click", () =>{
      formStepsNum--;
      updateFormSteps();
    });
});


  function updateFormSteps(){

    formSteps.forEach((formStep) =>{
        formStep.classList.contains("form-step-active") &&
        formStep.classList.remove("form-step-active");
    });
    
    formSteps[formStepsNum].classList.add("form-step-active");
  }

Answer 1

別に1ページでも複数ページでも実現可能ですが、普通はそれって要件次第じゃないでしょうか？
依頼者に確認すべき内容です。（質問内容的におそらく大雑把な依頼だと思うので、どちらでもよさそうですが）
後、HTMLにスクリプトを読み込んでいる箇所が見当たりませんが、これは元データそのままでしょうか？

Comments

[KKsall]

おっしゃる通りなのですが、先方様と連絡が中々取れないのです。。
こちらは一部抜粋となります。HTMLの全文はcodepenに記載しました

[175]

ソースコードの中身あまり見ていませんでしたが、これって多分formrun.jsが必要ですよね。
<script src="https://sdk.form.run/js/v2/formrun.js"></script>を追加してください。

[KKsall]

codepenに追加しました

[175]

一応formrun.jsを読み込むことで何かしら処理は動くようになっていますね。
多数のタイプミスあるのでまずよく見直してみてください。

[KKsall]

タグないのタイプミスはクライアント情報なので置き換えました。css削除し次へボタン押すとformrun.jsが機能してるみたいなのですがcssとBootstrapが入ると遷移するみたいです