非表单提交场景下如何实现输入框必填项验证？

以下是整理好的问卷页面HTML代码，按题目拆分展示：

这是问卷的第一个问题模块，包含返回按钮、进度提示、品牌标识、输入框和下一步按钮：

<!-- First Question = 1 -->
<section class="container-fluid section" id="1" style="display: block;">
 <div class="row">
  <div class="col-12 top">
   <span id="back-btn" class="question-previous badge badge-pill badge-dark" onclick="back0()">Voltar</span>
   <span class="question-progress">1/15</span>
   <a href="#"><h1 class="logo">norun</h1></a>
  </div>
  <div class="col-12 question-title">
   <h2>Nome da empresa</h2>
  </div>
  <div class="col-12 question-input">
   <input autofocus type="text" id="answer1" class="input-field">
  </div>
  <div class="col-12 submit-button">
   <button onclick="next1();" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
  </div>
 </div>
</section>

这是第二个问题模块，默认隐藏，结构和第一题一致，仅调整了返回事件、进度值和问题标题：

<!-- Second Question = 2 -->
<section class="container-fluid section" id="2" style="display: none;">
 <div class="row">
  <div class="col-12 top">
   <span class="question-previous badge badge-pill badge-dark" onclick="back1()">Voltar</span>
   <span class="question-progress">2/15</span>
   <a href="#"><h1 class="logo">norun</h1></a>
  </div>
  <div class="col-12 question-title">
   <h2>Ramo de atuação</h2>
  </div>
  <div class="col-12 question-input">
   <input type="text" id="answer2" class="input-field">
  </div>
  <div class="col-12 submit-button">
   <button onclick="next2();" type="button" class="btn"><i class="fas fa-arrow-right"></i></button>
  </div>
 </div>
</section>

内容的提问来源于stack exchange，提问作者Silva Freitas