FROM CACHE - jp_header

元々あるnameタグにemailと同様の必須項目動作をつけたい

元々あるnameタグにemailと同様の必須項目動作をつけたい

sakura1289
訪問者
1 0 0

お世話になっております。

Dawnテーマを使用しております。

 

Dawnの中のコンタクトフォームでは必須項目処理がemailのみになっているのですが、

同様の処理を名前につけたいと思っております。

emailのエラー処理を見様見真似でやっておりますが、うまくエラー処理が出ません。

 

つたない質問で申し訳ありませんが、知見がおありの方いらっしゃいましたら

ご教授頂けますと幸いです。

 

よろしくお願いします

 

        <div class="field field--with-error">
          <input
            class="field__input"
            autocomplete="name"
            type="text"
            id="ContactForm-name"
            name="contact[{{ 'templates.contact.form.name' | t }}]"
            value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
            aria-required="true"
            {% if form.errors contains 'name' %}
              aria-invalid="true"
              aria-describedby="ContactForm-name-error"
            {% endif %}      
            placeholder="{{ 'templates.contact.form.name' | t }}"
          >
      
          <label class="field__label" for="ContactForm-name">{{- 'templates.contact.form.name' | t }}<span aria-hidden="true">*</span></label>

        {%- if form.errors contains 'name' -%}
            <small class="contact__field-error" id="ContactForm-name-error">
              <span class="visually-hidden">{{ 'accessibility.error' | t }}</span>
              <span class="form__message">
                {%- render 'icon-error' -%}
                {{- form.errors.translated_fields.name | capitalize }}
                {{ form.errors.messages.name -}}
              </span>
            </small>
          {%- endif -%}
      
        </div>
1件の返信1

Qcoltd
Shopify Partner
1059 435 427

emailとnameでエラー処理のUIが変わってしまいますが、

下記のようにするのが最も簡単かと思います。

 

          <input
            class="field__input"
            autocomplete="name"
            type="text"
            id="ContactForm-name"
            name="contact[{{ 'templates.contact.form.name' | t }}]"
            value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
            placeholder="{{ 'templates.contact.form.name' | t }}"
          >
          <label class="field__label" for="ContactForm-name">{{ 'templates.contact.form.name' | t }}</label>

          <input
            required
            class="field__input"
            autocomplete="name"
            type="text"
            id="ContactForm-name"
            name="contact[{{ 'templates.contact.form.name' | t }}]"
            value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}"
            placeholder="{{ 'templates.contact.form.name' | t }}"
          >
          <label class="field__label" for="ContactForm-name">
            {{ 'templates.contact.form.name' | t }}
            <span aria-hidden="true">*</span>
          </label>

 

inputにrequiredを追加して、HTML5の機能で、必須入力として振る舞わせます。

HTML5の機能で実装しますと、

ブラウザによってエラーメッセージのデザインが変わってしまうと思いますが、

要件は満たせるのではないかと思います。

 

もし、emailとの違いが気になる場合は、

逆に、emailにもrequiredをつけてしまえばデザイン的な差異がなくなり良いかもしれません。

 

ご参考まで。

(キュー田辺)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/