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

[sakura1289]

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

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>

[Qcoltd]

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をつけてしまえばデザイン的な差異がなくなり良いかもしれません。

ご参考まで。

(キュー田辺)