EC-CUBE4でParsleyを利用したリアルタイムバリデーションの実装方法

EC-CUBE Advent Calendar 2020 8日目の記事です。

EC-CUBE4でフォーム画面の入力チェックはサーバ側のチェックで行っている画面と、HTML5のrequired属性を設定して入力チェックを行っている画面の2パターン存在しています。

サーバ側で入力チェックが必須なのは当然ですが、項目のフォーカスアウト時にリアルタイムバリデーションを行うように使い勝手をもう少し良くするために、入力チェックライブラリであるParsleyを利用します。

利用方法はサイトを見れば一目瞭然なのですが、EC-CUBE4で利用する方法を説明します。

Parsleyのダウンロード、配置

こちらよりparsley.zipファイルをダウンロードします。
parsley.zipリンクを押すとGitHubの画面へ遷移するのでSource code (zip)をダウンロード後解凍し、distディレクトリにあるi18nディレクトリとparsley.min.jsを下記のディレクトリへ配置します。

html/template/default/assets/js

Parsleyの利用方法

会員登録入力画面を参考にParsleyを設定してみます。

src/Eccube/Resource/template/default/Entry/index.twig

ファイルを開き、以下の内容をを追記します。

{% block javascript %}
    <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
{% endblock javascript %}

↓

{% block javascript %}
    <script src="//yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
    <script src="{{ asset('assets/js/parsley.min.js') }}"></script>
    <script src="{{ asset('assets/js/i18n/ja.js') }}"></script>
    <script>
        $(function() {
            Parsley.options.trigger = 'keyup focusout change input';

            $('#form1').parsley({
                classHandler: function(ParsleyField) {
                    return ParsleyField.$element;
                },
                errorsWrapper: '<p class="ec-errorMessage"></p>',
                errorTemplate: '<span></span>'
            }).on('field:validated', function() {
                var ok = $('.parsley-error').length === 0;
                if (!ok) {
                    $('.bg-load-overlay').remove();
                    if (this.$element.attr('required')) {
                        if (this.$element.hasClass('parsley-success')) {
                            this.$element.parent('div').removeClass('error');
                        } else {
                            this.$element.parent('div').addClass('error');
                        }
                    }
                }
            });
        });
    </script>
{% endblock javascript %}

Parsley.options.trigger = 'keyup focusout change input';

という箇所は、エラーチェックを行うタイミングを指定していますので、不要な方は削除してください。

次に、formタグにid属性を付与します。

<form method="post" action="{{ url('entry') }}" novalidate class="h-adr">
↓
<form id="form1" method="post" action="{{ url('entry') }}" novalidate class="h-adr">

この設定を行う事で、フォーカスアウト時にリアルタイムバリデーションを行ってくれるようになります。

一部デザイン崩れを起こす箇所もありますが、そこは適宜修正してください。

また、独自にデザインを作成している方は、parsleyに記載されている内容をデザインに合わせて修正してください。

Bootstrap4を利用してフォーム画面を作成されている方は以下の内容を適用する事でエラー箇所がキレイに表示されます。

$('#form1').parsley({
    errorClass: 'is-invalid',
    successClass: 'is-valid',
    classHandler: function(ParsleyField) {
        return ParsleyField.$element;
    },
    errorsWrapper: '<div class="invalid-feedback"></div>',
    errorTemplate: '<div></div>'
}).on('field:validated', function() {
    var ok = $('.is-invalid').length === 0;
    if (!ok) {
        $('.bg-load-overlay').remove();
    }
});

今回は必須入力のみのチェックを行なっていますが、他にも電話番号やメールアドレス等の入力チェックもありますので詳しくはParsleyのドキュメントをご覧ください。