Adding REQUIRED Text Input to cart not not having any luck

Technical Q&A

Topic summary

A Shopify merchant is attempting to add a required text input field to their cart for age verification and digital signature collection. Despite following official documentation and using a cart attributes element generator, the required field validation is not working—customers can leave it blank and proceed to checkout.

Troubleshooting attempts made:

  • Added required attribute and aria-required="true" to the input field
  • Removed all novalidate tags from forms on the page
  • Verified code appears correctly structured

Proposed solutions:

  • One user suggests checking for novalidate attributes on the form (though original poster already addressed this)
  • JavaScript validation offered as alternative approach using jQuery to check for empty required fields on form submission
  • Request made for preview link to diagnose further

Related issue:
Another user reports similar problems with the “Refresh” theme, where novalidate appears in browser inspection mode but not in edit mode, preventing removal.

The issue remains unresolved with no clear solution identified yet.

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

I followed the instructions below.

https://community.shopify.com/c/Shopify-Design/Cart-Use-cart-attributes-to-collect-more-information/m-p/613718

Using the element maker for cart attributes I received the following code.

 <p class="cart-attribute__field">
  <label for="bi-attest-that-i-am-21-years-of-age-or-olderb-brplease-provide-your-digital-signature-belowbr-bryour-order-will-be-declined-if-your-name-does-not-match-your-account-name-or-delivery-address"><b>I ATTEST THAT I AM 21 YEARS OF AGE OR OLDER.</b> <br>(PLEASE PROVIDE YOUR DIGITAL SIGNATURE BELOW)<br> <br>Your order will be declined if your name does not match your account name or delivery address.</label>
  <input required class="required" id="bi-attest-that-i-am-21-years-of-age-or-olderb-brplease-provide-your-digital-signature-belowbr-bryour-order-will-be-declined-if-your-name-does-not-match-your-account-name-or-delivery-address" type="text" name="attributes[<b>I ATTEST THAT I AM 21 YEARS OF AGE OR OLDER.</b> <br>(PLEASE PROVIDE YOUR DIGITAL SIGNATURE BELOW)<br> <br>Your order will be declined if your name does not match your account name or delivery address.]" value="{{ cart.attributes["<b>I ATTEST THAT I AM 21 YEARS OF AGE OR OLDER.</b> <br>(PLEASE PROVIDE YOUR DIGITAL SIGNATURE BELOW)<br> <br>Your order will be declined if your name does not match your account name or delivery address."] }}">
</p>

This does not seem to work for me, the field can simply be left empty and the customer can proceed.

I am simply trying to add a text field for customers to enter their name.

I have removed all novalidate tags from the forms on the page and still it does not seem to work.

I have also tried using aria-required=“true” with no success.

Is there something wrong with my code or the element creator? I seem to have everything done correctly but it wont work, so I must be missing something, I hope you may be able to offer some insight.

Perhaps theres an issue with the label name?

2

You should check if the form has “novalidate” attribute. This will make it ignore your "required"s.

(oops sorry – you’ve mentioned it already).

Can you share a preview link?

And you may resort to javascript to check this, similar to

$('form').submit( function(e) {
	var $this = $(this);
	var $empty_requireds = $this
		.find('[required]')
		.filter( function(){ 
			return this.value.trim().length == 0; 
		});

	if( $empty_requireds.length > 0 ){
		e.stopImmediatePropagation();
		return false;
	}
});
3

I can Message you a link.

4

I am having a similar problem with the “Refresh” theme. The “novalidate” only appears in inspection mode, but not in edit mode. I cannot remove “novalidate.” How can I make the fields required?

Thanks!