こんにちは
アカウント作成ページで名前などを必須項目にするため、下記のように class="required"と requiredを設置しました。
しかし、空欄の状態でもアカウントが作成されてしまいます。
こちらの原因がわかる方がおりましたら、ご教授いただけますと幸いです。
なお、テーマはDebutを利用しています
アカウント作成フォームで必須項目が効かない原因は、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 のみで動作をします。
ご参考になりましたら幸いです。
ご返信ありがとうございます!
そちらの方法は思いつきませんでした。
無事解決しました。ありがとうございます!