FROM CACHE - jp_header

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

yuicham
Shopify Partner
9 0 1

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

 

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

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

 

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

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


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

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

<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>

 

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

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

3件の返信3

AraiTakayuki
Shopify Partner
69 32 73

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

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

yuicham
Shopify Partner
9 0 1

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がよくわかっていないのでどう対応すればいいか、

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

スクリーンショット 2022-01-19 15.22.43.png

yuicham
Shopify Partner
9 0 1

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

novalidate: 'novalidate'を消去して、

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

スクリーンショット 2022-01-19 16.16.30.png

 

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

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

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

 

スクリーンショット 2022-01-19 16.18.15.png

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

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

 

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

 

・メール部分のコード

<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>

 

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