how to make a field required in a form

Highlighted
New Member
1 0 0

im having trouble making the field of the form i created required, i would really appreciate if somebody could help me a bit here

<div class="sixteen columns">
  <div class="section clearfix">
    <div class="title"><a href="/account">{{ 'customer.account.details' | t }}</a></div>
  </div>
</div>

<div class="section clearfix">
  <div class="eight columns offset-by-four">
    <div id="add_address" class="customer_address edit_address" style="display:none;">
      {% form 'customer_address', customer.new_address %}
        <h4 id="add_address_title">{{ 'customer.addresses.add_new' | t }}</h4>

        <div>
          <div>
            <label for="address_first_name_new">{{ 'customer.addresses.first_name' | t }}</label>
            <input type="text" id="address_first_name_new" class="address_form" name="address[first_name]" value="{{form.first_name}}" autocapitalize="words">
          </div>

          <div>
            <label for="address_last_name_new">{{ 'customer.addresses.last_name' | t }}</label>
            <input type="text" id="address_last_name_new" class="address_form" name="address[last_name]" value="{{form.last_name}}" autocapitalize="words">
          </div>
        </div>

        <label for="address_company_new">{{ 'customer.addresses.company' | t }}</label>
        <input type="text" id="address_company_new" class="address_form" name="address[company]" value="{{form.company}}" autocapitalize="words">

        <label for="address_address1_new">{{ 'customer.addresses.address1' | t }}</label>
        <input type="text" id="address_address1_new" class="address_form" name="address[address1]" value="{{form.address1}}" autocapitalize="words">

        <label for="address_address2_new">{{ 'customer.addresses.address2' | t }}</label>
        <input type="text" id="address_address2_new" class="address_form" name="address[address2]" value="{{form.address2}}" autocapitalize="words">

        <div>
          <div>
            <label for="address_city_new">{{ 'customer.addresses.city' | t }}</label>
            <input type="text" id="address_city_new" class="address_form" name="address[city]" value="{{form.city}}" autocapitalize="words">
          </div>

          <div>
            <label for="address_country_new">{{ 'customer.addresses.country' | t }}</label>
            <select id="address_country_new" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>
          </div>

          <div id="address_province_container_new" style="display:none">
            <label for="address_province_new">{{ 'customer.addresses.province' | t }}</label>
            <select id="address_province_new" class="address_form" name="address[province]" data-default="{{form.province}}"></select>
          </div>

          <div>
            <label for="address_zip_new">{{ 'customer.addresses.zip' | t }}</label>
            <input type="text" id="address_zip_new" class="address_form" name="address[zip]" value="{{form.zip}}" autocapitalize="characters">
          </div>

          <div>
            <label for="address_phone_new">{{ 'customer.addresses.phone' | t }}</label>
            <input type="tel" id="address_phone_new" class="address_form" name="address[phone]" value="{{form.phone}}" placeholder="555-555-1234">
          </div>
        </div>

        <p>
          {{ form.set_as_default_checkbox }}
          <label for="address_default_address_new" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
        </p>

        <p class="action_bottom">
          <input class="btn action_button" type="submit" value="{{ 'customer.addresses.add' | t }}" />
          <span class="note"> {{ 'customer.addresses.or' | t }} <a href="#" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customer.addresses.cancel' | t }}</a></span>
        </p>
      {% endform %}
    </div>

    <div id="address_tables">  
    {% paginate customer.addresses by 10 %}

      {% if customer.addresses.size > 0 %}
        {% for address in customer.addresses %}
        <div class="address_table">
          <div id="view_address_{{address.id}}" class="customer_address">
            <h4 class="address_title">
              {{ address.first_name | capitalize }} {{address.last_name | capitalize }}
              {% if address == customer.default_address %}({{ 'customer.addresses.default' | t }}){% endif %}
            </h4>
            <p class="address_actions">
              <span class="action_link action_edit">{{ 'customer.addresses.edit' | t | edit_customer_address_link: address.id }}</span> {{ 'customer.addresses.or' | t }}
              <span class="action_link action_delete">{{ 'customer.addresses.delete' | t | delete_customer_address_link: address.id }}</span>
            </p>
            <p class="view_address">
              {{ address.company }}<br>
              {{ address.street }}<br>
              {{ address.city | capitalize }}<br>
              {% if address.province_code %}
                {{ address.province_code | upcase }}<br>
              {% endif %}
              {{ address.zip | upcase }}<br>
              {{ address.country }}<br>
              {{ address.phone }}          
            </p>

          </div>    

          <div id="edit_address_{{address.id}}" class="customer_address edit_address" style="display:none;">
            {% form 'customer_address', address %}
              <h4>{{ 'customer.addresses.edit_address' | t }}</h4>

              <div>
                <div>
                  <label for="address_first_name_{{form.id}}">{{ 'customer.addresses.first_name' | t }}</label>
                  <input type="text" id="address_first_name_{{form.id}}" class="address_form" name="address[first_name]" value="{{form.first_name}}" autocapitalize="words">
                </div>

                <div>
                  <label for="address_last_name_{{form.id}}">{{ 'customer.addresses.last_name' | t }}</label>
                  <input type="text" id="address_last_name_{{form.id}}" class="address_form" name="address[last_name]" value="{{form.last_name}}" autocapitalize="words">
                </div>
              </div>

              <label for="address_company_{{form.id}}">{{ 'customer.addresses.company' | t }}</label>
              <input type="text" id="address_company_{{form.id}}" class="address_form" name="address[company]" value="{{form.company}}" autocapitalize="words">

              <label for="address_address1_{{form.id}}">{{ 'customer.addresses.address1' | t }}</label>
              <input type="text" id="address_address1_{{form.id}}" class="address_form" name="address[address1]" value="{{form.address1}}" autocapitalize="words">

              <label for="address_address2_{{form.id}}">{{ 'customer.addresses.address2' | t }}</label>
              <input type="text" id="address_address2_{{form.id}}" class="address_form" name="address[address2]" value="{{form.address2}}" autocapitalize="words">

              <label for="address_city_{{form.id}}">{{ 'customer.addresses.city' | t }}</label>
              <input type="text" id="address_city_{{form.id}}" class="address_form" name="address[city]" value="{{form.city}}" autocapitalize="words">

              <label for="address_country_{{form.id}}">{{ 'customer.addresses.country' | t }}</label>
              <select id="address_country_{{form.id}}" name="address[country]" data-default="{{form.country}}">{{ country_option_tags }}</select>

              <div id="address_province_container_{{form.id}}" style="display:none">
                <label for="address_province_{{form.id}}">{{ 'customer.addresses.province' | t }}</label>
                <select id="address_province_{{form.id}}" class="address_form" name="address[province]" data-default="{{form.province}}"></select>
              </div>

              <div>
                <div>
                  <label for="address_zip_{{form.id}}">{{ 'customer.addresses.zip' | t }}</label>
                  <input type="text" id="address_zip_{{form.id}}" class="address_form" name="address[zip]" value="{{form.zip}}" autocapitalize="characters">
                </div>

                <div>
                  <label for="address_phone_{{form.id}}">{{ 'customer.addresses.phone' | t }}</label>
                  <input type="tel" id="address_phone_{{form.id}}" class="address_form" name="address[phone]" value="{{form.phone}}" placeholder="555-555-1234">
                </div>
              </div>

              <p>
                {{ form.set_as_default_checkbox }}
                <label for="address_default_address_new" class="inline">{{ 'customer.addresses.set_default' | t }}</label>
              </p>

              <p>
                <input type="submit" class="btn action_button" value="{{ 'customer.addresses.update' | t }}">
                {{ 'customer.addresses.or' | t }}
                <a href="#" onclick="Shopify.CustomerAddress.toggleForm({{form.id}}); return false;">{{ 'customer.addresses.cancel' | t }}</a>
              </p>

            {% endform %}
          </div>
        </div><!-- end .address_table -->
        {% endfor %}

        <br class="clear" />
        <div id="action" class="action_link action_add note"><a href="#" class="action_button" style="display:block" onclick="Shopify.CustomerAddress.toggleNewForm(); return false;">{{ 'customer.addresses.add_new' | t }}</a></div>

      {% else %}
        <div id="action" class="action_link action_add note center"><a href="#" class="action_button" style="display:block" onclick="Shopify.CustomerAddress.toggleNewForm(); $(this).hide(); return false;">{{ 'customer.addresses.add_new' | t }}</a></div>
      {% endif %}

      <div id="address_pagination">{{ paginate | default_pagination }}</div>  
    {% endpaginate %}
    </div><!-- end #address_tables -->

  </div>
</div>  
    

<script type="text/javascript" charset="utf-8">
  // initialize observers on address selectors
  new Shopify.CountryProvinceSelector('address_country_new', 'address_province_new', {hideElement: 'address_province_container_new'});  
  {% for address in customer.addresses %}
    new Shopify.CountryProvinceSelector('address_country_{{address.id}}', 'address_province_{{address.id}}', {hideElement: 'address_province_container_{{address.id}}'});
  {% endfor %}
</script>
 

0 Likes
Highlighted
New Member
11 0 0

Hi Uriel,

Normally to make a field required simply add required="required" as a field attribute.

Hope this helps

Simon

0 Likes
Highlighted
Tourist
4 0 14

This is not working for me either - I followed all of the steps on on here - https://help.shopify.com/en/themes/customization/cart/get-more-information-with-cart-attributes and selected the theme product.customizable  on the product page and it still is not required to add to cart and checkout...

 

<p class="cart-attribute__field" >
<label for="model">Model #</label>
<input required class="required" id="model" type="text" name="attributes[Model #]" value="{{ cart.attributes["Model #"] }}">
</p>

 

0 Likes
Highlighted
Tourist
4 0 14

I followed every step here - https://help.shopify.com/en/themes/customization/products/features/get-customization-information-for... 

still not required go to checkout 

0 Likes
Highlighted
Tourist
4 0 14

Figured it out ...

Edit your product-customizable-template.liquid file (around line 143)

Change from this…. {% form 'product', product, class:form_classes, novalidate: 'novalidate' %}

To this… {% form 'product', product, class:form_classes:%}

Need to remove “nonvalidate” in order to be a required field

Highlighted
New Member
4 0 0

thank you mate

0 Likes
Highlighted
Excursionist
12 0 13

This works for me on Firefox desktop but not on Chromium desktop or Brave Mobile browser.

0 Likes
Highlighted
New Member
3 0 0

I tried it but unfortunately it doesn't work; the fields are not required.

0 Likes
Highlighted
New Member
1 0 0

Just submitted to say thanks man! Very helpfull @EvetteMP 

0 Likes