商品詳細ページに追加したメタフィールドを入力必須項目にしたい

INTL Legacy Internalonly Jp Removedcontent Jp

Topic summary

商品詳細ページに追加したメタフィールド（実際にはLineItem Properties）を入力必須項目にする方法についての質問です。

問題点：

  • UI Elements Generatorで「Required（必須）」にチェックを入れてコードを生成
  • 未入力でもカートボタンを押すとカートページに進んでしまう

解決方法：
Dawnテーマを例に説明すると、「カートに追加する」formに novalidate: 'novalidate' が設定されているため、HTML5の required 属性が無視されています。

対応手順：

  1. main-product.liquid 内の以下の記述を探す：
    {%- form 'product', product, novalidate: 'novalidate' -%}
  2. novalidate: 'novalidate' の部分を削除
  3. これによりHTML5のinput required検証が機能し、入力必須となる

参考リンクとして、MDNのnovalidate属性に関するドキュメントが提示されています。

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

初歩的な質問で申し訳ございません。

商品詳細ページ（main-product.liquid）にて

メタフィールドを追加したのですが、

必須項目にしたいです。

ジェネレーターにてRequired（必須）はチェックを入れた上で

ソースを吐き出し、コピペしているのですが、

未入力状態でカートボタンを押しても、カートページに進んでしまいます。

https://ui-elements-generator.myshopify.com/pages/line-item-property

恐れ入りますがご教示お願いいたします。

<p class="coupon_area">
<label for="engraveTxt" class="form__label">クーポン番号を入力してください</label>
<input
　required
　id="engraveTxt"
　oninput="javascript&colon;if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
　maxlength="15" 
　class="input_coupon required"
　type="number"
　name="properties[クーポン番号]"
　form="{{ product_form_id }}"
>
</p>
2

ご質問の内容を拝見しますと、

メタフィールドについてのご質問ではなく、

LineItem Propertiesに関するご質問と理解しました。

誤っていればスルーしてください。

また、

お使いのテーマが分からないので、

Dawnを例にご説明します。

Dawnの場合、「カートに追加する」ためのformに、下記のように、novalidate: 'novalidate’が設定されています。(Dawnをお使いであれば、main-product.liquidの中に同様の記述が見つかるかと思います。)

{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

これによって、form要素に、novalidate="novalidate"が設定され、

HTML5のinputのrequiredなどが無視されるようになります(検証されなくなります)。

参考:

https://developer.mozilla.org/ja/docs/Web/HTML/Element/form#attr-novalidate

http://html5.cyberlab.info/elements/forms/form-novalidate.html

したがいまして、

上記の記述から、下記のように、novalidate: 'novalidate’を取り除くことで、

HTML5のinput requiredのような検証が機能し、必須入力とすることができます。

{%- form 'product', product, id: product_form_id, class: 'form', data-type: 'add-to-cart-form' -%}

もし、

Dawnをお使いでなかったとしても、

上記のような記述がどこかにあるはずですので、

同様の修正を加えていただければ、

ご希望の状態にできるのではないかと思います。

ご参考まで。

(キュー田辺)