Facing a weird situation with required note and check out.

[JP2024]

I already thank everyone who can provide their opinions on this.

I edited the cart note to make it mandatory. When the customer clicks on "check out," the message appears, but after a few seconds, it still redirects to the checkout, making the mandatory field almost useless.

Has anyone experienced this before?

https://japanpharma.shop/

Dawn Theme

<div class="cart__footer isolate section-{{ section.id }}-padding">
{%- if settings.show_cart_note -%}
<cart-note class="cart__note field">
<label for="Cart-note">{{ 'sections.cart.note' | t }}</label>
<textarea required
class="text-area field__input"
name="note"
form="cart"
id="Cart-note"
placeholder="{{ 'sections.cart.note' | t }}"
>{{ cart.note }}</textarea>
</cart-note>
{%- endif -%}

[theycallmemakka]

Hi @JP2024 ,

Can you also let me know where you added this code? I could not review the site as it is password protected.

[JP2024]

Hi! Theycallmemakka! Thanks for your reply! 

Sorry, I think the time you tried to access the website, I had enable password to try something (code below). 

Now I added a "Select delivery time" also set as required, and still doesn't work. 
When click on check out it shows the message that it should be selected, but it goes through anyways. 

The previously code was added on sections/main-cart-footer.liquid and it was basically just the "<textarea required"

already tried class="required" required="required" but it didn't work.

This new attempt do solve the problem, it is a custom liquid on cart section.

I was wondering if it is possible to "gray out" check out button, when none is selected, but haven't tried yet. 

Don't really know if Shopify allows that.

https://japanpharma.shop/

<p>
<span>Please select one of the delivery times below:</span><br>
<label>
<input type="radio" id="custom-input--please-choose-one-of-the-delivery-times-below:" name="attributes[Please choose one of the delivery times below:]" form="cart" value="09:00~14:00" required="true">
<span>09:00~14:00</span>
</label><br>
<label>
<input type="radio" id="custom-input--please-choose-one-of-the-delivery-times-below:" name="attributes[Please choose one of the delivery times below:]" form="cart" value="14:00~16:00" required="true">
<span>14:00~16:00</span>
</label><br>
<label>
<input type="radio" id="custom-input--please-choose-one-of-the-delivery-times-below:" name="attributes[Please choose one of the delivery times below:]" form="cart" value="16:00~18:00" required="true">
<span>16:00~18:00</span>
</label><br>
<label>
<input type="radio" id="custom-input--please-choose-one-of-the-delivery-times-below:" name="attributes[Please choose one of the delivery times below:]" form="cart" value="18:00~20:00" required="true">
<span>18:00~20:00</span>
</label><br>
<label>
<input type="radio" id="custom-input--please-choose-one-of-the-delivery-times-below:" name="attributes[Please choose one of the delivery times below:]" form="cart" value="19:00~21:00" required="true">
<span>19:00~21:00</span>
</label><br>
</p>
<p>
<label for="custom-input--aditional-information">Aditional information</label><br>
<textarea id="custom-input--aditional-information" name="attributes[Aditional information]" form="cart">
</textarea>

</p>

[theycallmemakka · Accepted solution]

Hi @JP2024 

Thank you for your response. The input field needs to be inside a form element in order for the "required" attribute to work. Currently, you seem to be adding the additional element as a separate section, which is not inside the form element.

This is why the required attribute is not restricting users, as both the input and the submit button are working independently. The correct approach would be to make these changes at the DOM level by adding the new element inside the form.

However, I cannot help you with this as I require theme edit access and a little more time.

For now, I have written custom JS to replicate this feature. Please follow the steps below and let me know if this works.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code just above tag </body>

{% if request.page_type == 'cart' %}
<script>
 document.addEventListener('DOMContentLoaded', function () {
   const updateButton = document.querySelector('#checkout');
   const radioButtons = document.querySelectorAll('input[name="attributes[Please choose one of the delivery times below:]"]');
   const additionalInfo = document.getElementById('custom-input--aditional-information');

   function checkInputs() {
     let isRadioChecked = Array.from(radioButtons).some(radio => radio.checked);
     let isTextareaFilled = additionalInfo.value.trim() !== "";

     if (isRadioChecked && isTextareaFilled) {
       updateButton.style.pointerEvents = 'auto';
       updateButton.style.opacity = 1; // Optional: make the button fully opaque
     } else {
       updateButton.style.pointerEvents = 'none';
       updateButton.style.opacity = 0.5; // Optional: make the button appear disabled
     }
   }

   radioButtons.forEach(radio => {
     radio.addEventListener('change', checkInputs);
   });

   additionalInfo.addEventListener('input', checkInputs);

   // Initial check on page load
   checkInputs();
 });
</script>
{% endif %}

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[JP2024]

Thanks Makka, it works like a charm. 
I appreciate the time you took to help me out. 

I'll buy you a coffee. 

[theycallmemakka]

Thank you

I will appreciate that @JP2024