How to add custom input field for newsletter subscription to validation in Debut theme

[codevalley]

Hi Folks,

Currently i'm working on a shop with Debut theme installed. I added a extra field to the newsletter subscription form to catch the subscriber it's firstname. So far so good, this works like expected and the firstname is added to the newly created customer. But i would like to add this 'required' field to the form validation ... atm it seems only the 'email' input field is validated and gives me a nice error message if not filled.

So the question is what to do to get the 'firstname' field to return a error message when left empty on submitting?

I'm aware of the fact that removing novalidate: 'novalidate' from the form would make a field required and gives me feedback from the browser but that's not what i'm looking for ... would love to use the message generated by the theme 😉

How the form looks right now...

{% form 'customer', id: formId, novalidate: 'novalidate' %}
  {%- if form.posted_successfully? -%}
    <p class="form-message form-message--success" tabindex="-1" data-form-status>
      {{ 'general.newsletter_form.confirmation' | t }}
    </p>
  {%- endif -%}
  <input type="hidden" name="contact[tags]" value="newsletter">
  <div class="input-group {% if form.errors %} input-group--error{% endif %}">
    <input type="text"
      name="contact[first_name]"     
      id="{{ formId }}-first_name" 
      class="input-group__field newsletter__input{% if form.errors %} input--error{% endif %}"
      value="{{ form.first_name }}"
      placeholder="{{ 'customer.register.first_name' | t }}*" 
      aria-label="{{ 'customer.register.first_name' | t }}"
      aria-required="true"
      required
      autocorrect="off"
      autocapitalize="off"
      {% if form.errors %}
        aria-invalid="true"
        aria-describedby="{{ formId }}-first_name-error"
        data-form-status
      {% endif %}>
    <input type="email"
      name="contact[email]"
      id="{{ formId }}-email"
      class="input-group__field newsletter__input{% if form.errors %} input--error{% endif %}"
      value="{{ form.email }}"
      placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}*"
      aria-label="{{ 'general.newsletter_form.email_placeholder' | t }}"
      aria-required="true"
      required
      autocorrect="off"
      autocapitalize="off"
      {% if form.errors %}
        aria-invalid="true"
        aria-describedby="{{ formId }}-email-error"
        data-form-status
      {% endif %}>
    <span class="input-group__btn">
      <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
        <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
      </button>
    </span>
  </div>
  {% if form.errors contains 'email' %}
    <span id="{{ formId }}-email-error" class="input-error-message">
      <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
      {% include 'icon-error' %}
      <span class="site-footer__newsletter-error">{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
    </span>
  {% endif %}
	{% if form.errors contains 'first_name' %}
    <span id="{{ formId }}-first_name-error" class="input-error-message">
      <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
      {% include 'icon-error' %}
      <span class="site-footer__newsletter-error">{{ form.errors.translated_fields['first_name'] | capitalize }} {{ form.errors.messages['firstname'] }}.</span>
    </span>
  {% endif %}
{% endform %}

Hoping that some of you have experienced this before.

Regards.

[KLohmann]

I'm looking for the same information. I can't get the First Name field to be a required field.