Why aren't required fields working on my Dawn theme product page?

Technical Q&A
1

Hello,

First and foremost I am no coder!

That being said, I used the Shopify UI Elements Generator to add a couple custom inputs to my product page. I selected each one to be requited yet, they can still be added to the cart without them having an input. I have already removed the novalidate are. The code in question is:

Sign Version

Background Color

Top Layer Color

Word Color

Custom Lettering

{%- when ‘buy_buttons’ -%}

{%- form ‘product’, product, id: product_form_id, class: ‘form’, data-type: ‘add-to-cart-form’ -%}

<button type="submit" name="add" class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}" {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}

I have also disabled all the pop up and drawer carts and have made it go directly to the cart page.

Also, how do I make these options show up to the buyer in the cart page?

Thanks in advance!

2

There is a code format button when making posts it increases chances someone will read it.

Avoid pasting walls of code and only provide relevant parts it drastically reduces the chances anyone will read it. For example there is no need to include svg code.

If you removed novalidate check on the frontend that is infact not there by viewing the page source in the browser using ctrl+u keybind.

Test the form by disabling javascript in your browser, the form should not be submit-able with required fields and no novalidate present unless all fields are filled.

If validation works while javascript is disabled you need to update the themes javascript to respect required attributes on form fields.

Also, how do I make these options show up to the buyer in the cart page?

To display cart attributes in the /cart template use them just like you are already in the partials you’ve pasted here.

{{ cart.attributes[“Background Color”] }}

To have them editable is much more advanced requiring html form work , or javascript with the ajax api, and liquid.

3

Did you ever manage to make input fields required for a product?