フォームでエラーになった際に入力値を保持したい

日本語 ディスカッション 技術的なQ＆A

AI-generated summary

主題: Shopifyの新規会員登録フォーム（register.liquid）でエラー時に入力値を保持したい。

現状: Liquid（Shopifyのテンプレート言語）で form ‘create_customer’ を使用。{{ form.last_name }} などで値の保持を期待したが、{{ form | json }} では first_name/last_name/email/password がすべて null、errors は [“password”] のみで、リロード後に入力がクリアされる。

重要な指摘: 多くのShopifyテーマはサーバー側ではなく、JavaScript（クライアント側）でエラー制御と入力値保持を実装している。

判断・対応: サーバー側での制御要件は特にないため、他テーマを参考にJavaScriptで対応する方針へ変更。

状態: 方針は確定し、JavaScript実装に進めることで実質的に解決。サーバー側で値を保持する方法の検討は打ち切り。

1

とても初歩的な事で恐れいります。

register.liquid にて新規会員登録画面を作成中です。

会員登録時、エラーが出た際に画面がリロードされ、入力値がクリアされてしまいます。

この入力値を保持したいのですが、うまくいきません。

register.liquid のコードは以下のとおりです。

{% form 'create_customer' %}
  {{ form.errors | default_errors }}
  
    

      
      
    

    
      
      
    

  

  
    
    
    
    
  

  
{% endform %}

{{ form.last_name }} で入力値を引き継げるものと思ったのですが、
引き継げず、{{ form | json }} で中身を見てみると

{"first_name":null,"last_name":null,"email":null,"password":null,"errors":["password"]}​

と表示され、null になっているようです。
解決方法をご存知の方がいらっしゃいましたら、アドバイスいただけますと幸いです。

2

Shopifyの多くのテーマがJavaScriptでエラー制御をすることで対応をしている部分に思います。

データ登録後エラー制御をされたい部分に理由はありますでしょうか？

3

ご回答いただきありがとうございます。

JavaScriptで制御することが一般的なのですね。

他のテーマをよく見てみるべきでした。

サーバー側にてエラー制御をしたい理由は特にありませんので、

他のテーマを参考にしつつ、JavaScriptでの対応したいと思います。

ご親切なアドバイスに感謝いたします。