我试图在我的HTML表单中使用必需的和模式。表单的submit按钮在documentready上附加了一个函数，该函数隐藏new-guest div并显示qr生成的div。此功能附加到所有页面显示按钮。还有一个在提交时附加到表单的函数，用于处理表单中的信息。目前，当我单击submit按钮时，它会隐藏new-guest div，尽管输入没有填写或无效。我觉得在为这个表单编写更具体的函数之前，我可以做一个最小的修改。有什么建议吗？

<div class="container p-4 view" id="new-guest">
    <!-- when making a form, always start with form class, form-floating is a bootstrap class -->
    <form class="form-floating" method="post" id="infoform">
      <!-- each form-floating div holds a label and the input you want to take in -->
      <div class="form-floating">
        <!-- type is self explanatory, form-control is bootstrap class, placeholder is for the animation to work, required is self explanatory -->
        <input type="text" class="form-control" id="firstName" name="firstName" placeholder="lionel" required><br><br>
        <label for="firstName">First Name</label>
      </div>
      <div class="form-floating">
        <input type="text" class="form-control" id="lastName" name="lastName" placeholder="messi" required><br><br>
        <label for="lastName">Last Name</label>
      </div>
      <div class="form-floating">
        <input type="tel" class="form-control" id="phoneNumber" name="phoneNumber" pattern="[0-9]{10}" placeholder="idk"
          required>
        <label for="phoneNumber">Phone Number</label>
        <small>Format: 1234567890</small><br><br>
      </div>
      <button type="submit" page-show="qr-generated" class="btn btn-primary" value="Submit">Submit</button>
    </form>
  </div>

//function attached to buttons to change div currently viewable
    <script>
      $(document).ready(function (e) {
        showView("home");
        function showView(viewName) {
          $('.view').hide();
          $('#' + viewName).show();
        }
        $('[page-show]').click(function (e) {
          var viewName = $(this).attr('page-show');
          showView(viewName);
        });
      });
    </script>

async function submitForm(e) {
        // Get form values
        e.preventDefault();
        var firstName = document.getElementById("firstName").value;
        var lastName = document.getElementById("lastName").value;
        var phoneNumber = document.getElementById("phoneNumber").value;
....
}
var form = document.getElementById("infoform");
form.addEventListener("submit", submitForm);