line-item-property入力制限

[mottu-yurufuwa]

お世話になります。

line-item-propertyの入力値を半角英数字限定にしたく、

以下のように商品ページにフォームを入れましたが、半角英数字で絞ることができません。

<p class="line-item-property__field">
<label for="">メッセージの内容を入力してください(20文字以内/アルファベットのみ)</label><br>
<input form="product-form-{{ section.id }}" id="" type="text" name="properties[メッセージ]" maxlength="20" pattern="^[a-zA-Z]+$">
</p>

こちらはShopify特有でできないのでしょうか？

もしできる案がありましたら、ご教授くださると幸いです。

よろしくお願いいたします。

[NIIGAKI_HYUGA · Accepted solution]

初めまして。新垣です。

こちらはShopify特有でできないのでしょうか？

---

→弊テストストアで試してみましたが、そのようです。おそらく、line-item-propertyの追加、商品のカートへの追加等複雑な動きが絡み合うのでpattern属性が機能しなくなってしまうのではないかと思います。

代替案として、JSを用いた制御方法がありますので下記参考ください。

<p class="line-item-property__field">
                  <label for="message-input"
                    >メッセージの内容を入力してください(20文字以内/アルファベットと数字のみ)</label
                  ><br>
                  <input
                    form="product-form-{{ section.id }}"
                    id="message-input"
                    type="text"
                    name="properties[メッセージ]"
                    maxlength="20"
                  >
                  <span id="message-error" style="color: red; display: none;"
                    >エラー: 半角英数字のみ入力してください。</span
                  >
                </p>

                <script>
                  document.addEventListener('DOMContentLoaded', function() {
                      var messageInput = document.getElementById('message-input');
                      var errorMessage = document.getElementById('message-error');
                      var submitButton = document.getElementsByClassName("product-form__buttons")[0];

                      // 入力値の変更を監視
                      messageInput.addEventListener('input', function() {
                          var value = messageInput.value;
                          if (!/^[A-Za-z0-9]*$/.test(value)) {
                              // 半角英数字でない場合はエラーを表示し、ボタンを非表示に
                              errorMessage.style.display = 'block';
                              submitButton.style.display = 'none';
                          } else {
                              // エラーがない場合はエラーメッセージを非表示にし、ボタンを表示
                              errorMessage.style.display = 'none';
                              submitButton.style.display = 'block';
                          }
                      });
                  });
                </script>

[mottu-yurufuwa]

新垣さま

ご回答、テストコードありがとうございます！

こちらの内容でうまく動作できました。

ご協力感謝いたします。

[Jizo_Inagaki]

使用テーマ名やformタグの詳細に関する記載がないため推測になりますが、おそらくformタグにnovalidate属性が設定されているからだと思いますのでソースとテーマ内を確認ください。

推測が間違っている場合は申し訳ありません。