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

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.