I’m currently migrating my web app’s existing SqPaymentForm to the new Square Web Payments SDK, and my billing information inputs are no longer working as intended. I have the basic HTML “required” attribute set on all of them, so that they prevent a blank form submission. Like so:
<div class="form-field">
<input required class="form-control" type="text" name="firstname" placeholder="First name">
</div>
Has anyone else run into this?
When you say they aren’t working as intended what’s the behavior you’re seeing? Are you able to submit the form without those fields filled out? 
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:
