Customized Product fields not "required" for checkout...even though I coded them to be required?

[jonnieee]

Looking for some advice/eyes on this bit of code that has me wondering why it's not doing its thing.

I created 2 custom templates to collect fields for my custom products. I've had two orders come through where the customer either did not input any of the required fields OR they did and it's not being pushed through on the order page which very well could be happening >.<

I added the same product to my cart and left the "required" fields blank and it let me add to cart without any mention that I was missing the fields needed for checkout.
Then I added customizations but nothing was recorded at the cart level...shoot!

I'd like to have the fields have a little * next to them, but how do I also fix that customers are inputing information, but that information is disappearing?

Here are the codes in question:
custom template 2

  <div>

        <p class="line-item-property__field">

  <label for="customization">Customization</label>

  <input required class="required" id="customization" type="text" name="properties[Customization]">

</p>

      </div>

      <p class="line-item-property__field">

  <label>Letter Hue</label>

  <select required class="required" id="letter-hue" name="properties[Letter Hue]">

    <option value="darkened to black">darkened to black</option>

    <option value="undarkened for subtlety">undarkened for subtlety</option>

  </select>

</p>

      <div>

custom template 1

  <div>

        <p class="line-item-property__field">

  <label for="customization">Customization</label>

  <input required class="required" id="customization" type="text" name="properties[Customization]">

</p>

      </div>

[AprilsEscape]

I am having the same issue.