Adding REQUIRED Text Input to cart not not having any luck

Excursionist
19 3 4

I followed the instructions below.

 

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

 

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?

0 Likes
Highlighted
Shopify Expert
2686 67 688

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;
	}
});

 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Excursionist
19 3 4

I can Message you a link.

0 Likes