How to validate HTML form and call JS function through the same button? If not, how to set it up properly?

I am trying to use required and patterns in my HTML form. The submit button for the form has a function attached to it on document ready that hides the new-guest div and shows the qr-generated div. This function is attached to all page-show buttons. There is also a function that is attached to the form on submit that processes the info in the form. Currently, when I click the submit button, it hides the new-guest div, despite the inputs not being filled out or valid. I feel like there’s a minimal change I can make before I write more specific functions for this form. Any advice on how I can proceed?

<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);