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

**URL:** <https://community.shopify.com/t/topic/185831>\
**Category:** Removedcontent Jp\
**Created:** [January 23, 2023, 11:39am UTC](https://community.shopify.com/t/topic/185831 "2023-01-23T11:39:34Z")\
**Posts on this page:** 2\
**Page:** 1

## AI-generated 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属性に関するドキュメントが提示されています。

<div class="post-metadata">

**Author:** ![takumakuta](https://avatars.discourse-cdn.com/v4/letter/t/7ab992/32.png) [@takumakuta](https://community.shopify.com/u/takumakuta)\
**Post date:** [January 23, 2023, 11:39am UTC](https://community.shopify.com/t/topic/185831/1 "2023-01-23T11:39:34Z")

</div>

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

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

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

必須項目にしたいです。

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

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

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

[https://ui-elements-generator.myshopify.com/pages/line-item-property](https://ui-elements-generator.myshopify.com/pages/line-item-property)

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

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

```

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [January 24, 2023, 1:47pm UTC](https://community.shopify.com/t/topic/185831/2 "2023-01-24T13:47:16Z")

</div>

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

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

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

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

また、

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

Dawnを例にご説明します。

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

```markup
{%- 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](https://developer.mozilla.org/ja/docs/Web/HTML/Element/form#attr-novalidate)

[http://html5.cyberlab.info/elements/forms/form-novalidate.html](http://html5.cyberlab.info/elements/forms/form-novalidate.html)

したがいまして、

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

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

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

```

もし、

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

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

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

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

ご参考まで。

(キュー田辺)