追加した会員登録時の入力項目を、記入必須にしたい

[yuicham]

追加した会員登録時の入力項目を、記入必須にしたいです。

住所などの会員登録時の入力項目は、
コードを編集することで増やすことはできました。
しかしこれらの項目を記入必須にする方法が分かりません。

調べましたが、出てきませんでした。

コードを編集することで、
追加した項目を必須にすることはできるのでしょうか？

もし可能でなのであれば、そのコードを教えていただますと幸いです。

住所の項目を追加するために、下記のコードを追加しました。

「お客様に関するメモ」の欄に格納される状態です。

<div class="form__input-wrapper" data-form-input-wrapper>
<label class="form__input-label" for="{{ formId }}-Example">住所​</label>
<input type="text" name="customer[note][住所​]"　 class="form__input" id="{{ formId }}-Example" {% if form.example %}value="{{ form.example }}"{% endif %}>
</div>

メールアドレスとパスワード以外は、
空欄の状態にしたままでも登録することができてしまいます。
他の項目も空欄のときにエラーとなるように編集したいです。

どうぞよろしくお願いいたします。

[AraiTakayuki]

こちらで回答させて頂いているとおり、requiredを付ければ必須になるかと思います。

https://community.shopify.com/c/技術的なq-a/アカウント作成で入力必須の項目を追加したいです/m-p/1286605

[yuicham]

AraiTakayukiさん
ご返答くださり、ありがとうございます。

requiredを付けてみましたが、できませんでした。

<div class="form__input-wrapper" data-form-input-wrapper>
<label class="form__input-label" for="{{ formId }}-Example">住所​</label>
<input type="text" name="customer[note][住所​]" class="form__input" id="{{ formId }}-Example" {% if form.example %}value="{{ form.example }}"{% endif %} required>
</div>

教えていただいた掲示板にあったコードをそのままコピペしてみましたが、

こちらもなぜかできませんでした。
<label for="comment" class="label--hidden"></label><input type="text" name="customer[note][メンバーID]" id="comment" placeholder="メンバーID" required>

共有いただいていたリンク先に、「関連付けされた<form>にnovalidateが設定された場合、required属性は無効になります。」との記述がありました。
コードをよく見ると、novalidateの記述がありました。
{%- form 'create_customer', class: 'form', data-form: '', novalidate: 'novalidate' -%}

liquidがよくわかっていないのでどう対応すればいいか、

ご教授いただけますと幸いです。

[yuicham]

{%- form 'create_customer', class: 'form', data-form: '', novalidate: 'novalidate' -%}の中の、

novalidate: 'novalidate'を消去して、

それぞれのinput要素の中にrequiredを付け加えるとできました！

ただ、メールやパスワードを入れなかった場合は、

デフォルトのままエラーが出て、

他の入力情報が全て消去されてしまいます。

できればメールやパスワードも形式を合わせたいとも思うのですが、

動的な動作が入るため、壊れてしまうことが怖くて触れません。

メールやパスワードのコードをいじっても大丈夫なものなのでしょうか？

・メール部分のコード

<div class="form__input-wrapper{% if form.errors contains 'email' %} form__input-wrapper--error{% endif %}" data-form-input-wrapper>
<label class="form__input-label" for="{{ formId }}-email">{{ 'customer.register.email' | t }}</label>
<input
type="email"
name="customer[email]"
id="{{ formId }}-email"
class="form__input"
{% if form.email %} value="{{ form.email }}"{% endif %}
autocorrect="off"
autocapitalize="off"
autocomplete="email"
aria-required="true"
{% if form.errors contains 'email' %}
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{% endif %}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId }}-email-error" class="form__error-message-wrapper form__error-message-wrapper--input">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span class="form__error-message">{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}
</div>

・パスワード部分のコード

<div class="form__input-wrapper{% if form.errors contains 'password' %} form__input-wrapper--error{% endif %}" data-form-input-wrapper>
<label class="form__input-label" for="{{ formId }}-password">{{ 'customer.register.password' | t }}</label>
<input
type="password"
name="customer[password]"
id="{{ formId }}-password"
class="form__input"
aria-required="true"
{% if form.errors contains 'password' %}
aria-invalid="true"
aria-describedby="{{ formId }}-password-error"
{% endif %}
>
{%- if form.errors contains 'password' -%}
<span id="{{ formId}}-password-error" class="form__error-message-wrapper form__error-message-wrapper--input">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }}</span>
{% render 'icon-error' %}
<span class="form__error-message">{{ form.errors.translated_fields['password'] | capitalize }} {{ form.errors.messages['password'] }}.</span>
</span>
{%- endif -%}
</div>

お手数をおかけしますが、どうぞよろしくお願いいたします。