アカウント作成ページでrequiredを設置しても必須項目にならない

AI-generated summary

アカウント作成フォームで必須項目が効かない原因は、Debutテーマの customers/register.liquid のフォームにある novalidate 属性がブラウザのHTML5入力バリデーション(requiredなど)を無効化していたため。

対処方法: {% form 'create_customer', id: formId, novalidate: 'novalidate' %} を {% form 'create_customer', id: formId %} に変更して novalidate を削除する。

補足: required はHTML標準の必須指定。class=“required” はCSSクラスであり、必須化の機能は持たないため、入力チェックには required のみで十分。

結果: 提案どおり修正して問題は解決済み。ユーザーが動作確認を報告。

注記: コードスクリーンショットが添付されたが、理解の中心は上記のフォーム属性の変更。

こんにちは

アカウント作成ページで名前などを必須項目にするため、下記のように class="required"と requiredを設置しました。

しかし、空欄の状態でもアカウントが作成されてしまいます。

こちらの原因がわかる方がおりましたら、ご教授いただけますと幸いです。

なお、テーマはDebutを利用しています


          

デフォルトのDebutのコードをベースに回答を差し上げます。

customers/register.liquid の10行目、以下の記述を、

{% form 'create_customer', id: formId, novalidate: 'novalidate' %}

次のように変更をしてください。

{% form 'create_customer', id: formId %}

novalidate: ‘novalidate’ という箇所がrequiredなどの判定をしているバリデーションを無効にしている記述になりますので、

こちらを外すことで、ご指定のチェック機能を有効にすることができます。

尚、class=“required” は必須項目ではないため、入力の有無をチェックする機能のみでしたら、

末尾に追加をいただいている required のみで動作をします。

ご参考になりましたら幸いです。

ご返信ありがとうございます!
そちらの方法は思いつきませんでした。
無事解決しました。ありがとうございます!