HTML input "required" attribute not working after migrating from SqPaymentForm

Hey Bryan! Right now the “Pay Now” submit form-button can be clicked without having all required fields filled it. I think the issue is I have added an on-click event listener (as per the Square example docs) that runs a handlePaymentMethodSubmission function, which creates a payment token asynchronously, whereas before my Pay Now button would post the form and attempt making the payment token in the same submission.

const formButton = document.getElementById(
  'form-button'
);

formButton.addEventListener('click', async function (event) {
  await handlePaymentMethodSubmission(event, card);
});

Before using the new Payments API, if I clicked Pay with no fields filled in it would validate the all form fields in order:

After implementing with the event listener code above it only validates the Card payment fields: