Help to customise cart check-out (making a required field)

[Jj37]

Can I ask someone to help with the following.

I have created a 'how did you hear about me' box. And although I have made it a required field, I can not get the error messages to appear.

I am using Dawn theme.

Here is what I have done.

sections/main-cart-footer.liquid

       <div class="cart-note">
  <label for="how-hear">How did you hear about me?</label>
  <select id="how-hear" name="attributes[how_hear]" required>
    <option value="" disabled selected>Please select</option>
    <option value="Friend">Friend</option>
    <option value="Social Media">Social Media</option>
    <option value="Advertisement">Advertisement</option>
    <option value="Other">Other</option>
  </select>
</div>

In assets/base.css

.cart-note label::after {
  content: " *";
  color: red;
}

In assets/theme-editor.js

document.addEventListener('DOMContentLoaded', function() {
  const cartForm = document.querySelector('form[action="/cart"]');
  if (cartForm) {
    cartForm.addEventListener('submit', function(e) {
      const howHearSelect = document.getElementById('how-hear');
      if (howHearSelect && howHearSelect.value === '') {
        e.preventDefault(); // Prevent form submission
        alert('Please tell us how you heard about us.');
        howHearSelect.focus(); // Focus on the dropdown
      }
    });
  }
});

Any advice is apprecaited.

[EcomGraduates]

You've set everything up well, but if the error message isn’t appearing, the issue might be in how the script is executing or the placement of your code.

Try these steps:

1. Move the script to the very bottom of your theme.liquid file, just before the closing </body> tag. This ensures it runs after all the content has loaded.

2. Check for console errors: Open your browser's developer console (usually by pressing F12), then go to the Console tab. See if there are any JavaScript errors that might be stopping your script from running.

3. Simplify your test: Replace the alert with a simple console.log('Error message test'); to ensure your script is executing. If it logs correctly, the issue might be in how the alert or the preventDefault() is functioning.

// In theme-editor.js
document.addEventListener('DOMContentLoaded', function() {
  const cartForm = document.querySelector('form[action="/cart"]');
  if (cartForm) {
    cartForm.addEventListener('submit', function(e) {
      const howHearSelect = document.getElementById('how-hear');
      const errorMessage = document.querySelector('.error-message');
      
      if (howHearSelect && howHearSelect.value === '') {
        e.preventDefault(); // Prevent form submission
        if (errorMessage) {
          errorMessage.style.display = 'block'; // Show error message
        } else {
          const newError = document.createElement('div');
          newError.classList.add('error-message');
          newError.textContent = 'Please tell us how you heard about us.';
          newError.style.color = 'red';
          howHearSelect.parentNode.appendChild(newError);
        }
        howHearSelect.focus(); // Focus on the dropdown
      } else if (errorMessage) {
        errorMessage.style.display = 'none'; // Hide error if valid
      }
    });
  }
});

This method will display a custom error message directly beneath the dropdown when the form is submitted without a selection.

[Jj37]

Thank you.

I now have another problem. I have received an order today, but the order confirmation did not tell me what the customer selected. Is there something else I have to do in order to have it appear in an email/on the order confirmation page within Shopify admin panel?