How to make additional text fields REQUIRED to fill out in cart before proceeding to check out?

Topic summary

A user is trying to add two required text fields (Discord Name and VRChat Username) to their Shopify cart page but cannot enforce the requirement. They’ve successfully added the fields using HTML with required attributes and CSS classes in the cart-footer-liquid file of the Sense theme, but customers can still proceed to checkout without filling them out.

Current Issue:

  • The required attribute and CSS class appear in the code but don’t function as intended
  • Customers can bypass the empty fields during testing

Desired Outcome:

  • Make fields truly mandatory, OR
  • Gray out the checkout button until both fields are completed

The user acknowledges being a coding beginner and has included a screenshot showing the current cart page appearance. They’re seeking guidance on how to properly implement field validation to prevent checkout without completing these custom attributes.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.

So I have been struggling with this for quite some time, I have successfully managed to add the 2 additional text fields/boxes I want customers to fill out before proceeding to check out, but I cannot figure out how to make them actually ‘Required’ so they cannot proceed without filling them out. I want the fields to either be actually required, or the button for ‘Check out’ to be grayed out until they have filled out both fields. I will post the code I have used for the field boxes below:

Discord Name

VRchat Username

I have put the code in the “main-cart-footer.liquid” in the Sense theme. I know the ‘required class’ says ‘Required’, but in fact it is not, since when testing it, I can proceed to check out without filling them out. Any help is appreciated! Big newbie when it comes to code, it is way out of my knowledge. I will include a screenshot of what it all looks like.