AEM開発者ブログ by YAMATO

アドビ社のデリバリーパートナー大和株式会社のAEM開発者ブログです。

ページプロパティにカスタムの入力チェックを追加する

こんにちは!大和株式会社の松岡です。

今回は、ページプロパティにカスタムの入力チェックを追加する方法を紹介します。

ページプロパティの項目を必須にしたい場合、ノードにrequired="{Boolean}true"を設定することで簡単に実装できます。
下記のように必須エラーが起きた場合は、自動でタブと項目が赤に変わり、メッセージが表示されます。

しかし、実際のプロジェクトでは項目間の関連チェックや、文字列のチェックを行いたいケースもありますよね。例えば、、、

  • 「製品番号」が入力された場合、「製品詳細」を必須にしたい。
  • 「製品番号」は「A○○○-XXX」「B○○○-XXX」のいずれか。異なる形式はエラーとしたい。
  • メールアドレスの入力は、自社と関連会社のメールアドレスのみ許可する。その他はエラーとしたい。

さて、どう対応しましょうか、、、?

「JavaScriptで、SAVEボタンのタイミングでcheck処理を追加してやればいいのかな。」 と考え、現行の必須チェックと同様の動きにしようとすると。。。

  • SAVEボタンクリックのタイミングで、入力チェックを実施
  • 入力チェックのエラーで、対象のタブ・項目を赤字に変更。
    合わせて、項目箇所にエラーメッセージを表示。
  • 入力チェックのエラーが解消された場合、対象のタブ・項目を元の色に戻す。
    合わせて、項目箇所のエラーメッセージを非表示。

単純に見えますが、入力チェックのエラーを解消した動作を考えていくと、意外と処理が複雑になります。
また、現行の必須チェックは入力のタイミングでも実施されており、同様に実現しようとするとより複雑になっていきます。

必要な個所で毎回実装するのは、大変ですよね。

こんなときは、任意の入力チェックを設定出来るfoundation-validationを活用しましょう。

任意のcheck処理を登録することで、項目の入力、または保存時にcheck処理が走ります。
さらに必須チェック同様、エラーの場合はタブと項目が自動で赤くなり、指定したメッセージも表示されます。

では、実際に下記の仕様を想定して実装していきます。

ページプロパティに追加する仕様

製品タブを新規作成。下記の項目を用意する。

  • 製品型番
  • meta descriptionに製品型番を設定:チェックボックス
  • 関連check:「meta descriptionに製品型番を設定」がチェックオンのとき必須とする

製品タブのノード設定

作成したノードは下記の通りです。 この設定でのポイントは、granite:classです。
このプロパティを設定することで、ページプロパティの対象項目に任意のクラスを設定することが出来ます。

check処理

(function($) {
    "use strict";

    $(document).ready(function() {
        addValidatorForSetPMNo();
    });

    function addValidatorForSetPMNo() {
        let foundationValidator = $(window).adaptTo("foundation-registry");
        foundationValidator.register('foundation.validation.validator', {
            selector: ".cq-dialog-pmno",
            validate: function (el) {
                let setpmno = ".cq-dialog-setpmno";
                if ($(el).val().length == 0 && $(setpmno).attr("checked")) {
                    return "製品型番が入力されていません";
                }
            }
        });
    }
})(jQuery);

selector:対象の項目のセレクタを指定
validate:check処理を記述。returnにはエラーメッセージを指定。

格納場所は下記とします。 /apps/weretail/components/structure/page/clientlibs/editor/js/addValidator.js

さらにclientlibsにはcq:dialog用のcategoriesを設定

cq:dialogにはextraClientlibsに対象のcategoriesを追加し、ダイアログ表示時にチェック処理を読み込めるようにします。

実際に動きを確認してみましょう。下記の通り、チェックボックスにチェックするとエラーになりました。

ここで、さらに仕様を追加してみます。

ページプロパティに追加する仕様

製品型番:xx-xxxx の形式のみ入力可能とする。(x:半角英数字)

実装の検討

ここでは、製品型番以外でも入力制限が発生することに備えて、共通化してみます。 引数として、対象のフィールド名を渡すと、設定されたData属性から、正規表現のパターン、checkのtrue/false、エラーメッセージを取得しエラー処理を行います。

check処理

check処理は下記のようになります。

(function($) {
    "use strict";

    $(document).ready(function() {
        addValidatorForSetPMNo();
        addValidatorForRegexPattern("pmno");
    });

    function addValidatorForSetPMNo() {
        let foundationValidator = $(window).adaptTo("foundation-registry");
        foundationValidator.register('foundation.validation.validator', {
            selector: ".cq-dialog-pmno",
            validate: function (el) {
                let setpmno = ".cq-dialog-setpmno";
                if ($(el).val().length == 0 && $(setpmno).attr("checked")) {
                    return "製品型番が入力されていません";
                }
            }
        });
    }
    function addValidatorForRegexPattern(fieldName) {
        let foundationValidator = $(window).adaptTo("foundation-registry");
        foundationValidator.register('foundation.validation.validator', {
            selector: ".cq-dialog-validation__" + fieldName,
            validate: function (el) {
                let regexPatern = $(el).attr("data-regex-patern");
                let regexFlags = $(el).attr("data-regex-flags");
                let regexMessage = $(el).attr("data-regex-error-message");
                let valid = $(el).val().length === 0 || new RegExp(regexPatern,regexFlags).test($(el).val());
                if (!valid) {
                    return Granite.I18n.get(regexMessage || "Value does not match the required format.");
                }
            }
        });
    }
})(jQuery);

製品タブのノード設定

製品型番のノードを下記の通り設定しました。

実際に操作すると、下記の通り対象外の文字列の場合はエラーとなります。

最後に

今回は、ページプロパティに入力チェックを追加する方法をまとめました。
ページプロパティに情報を付加させることは多々あるため、必須チェック以外が必要になることもあると思います。 参考になれば、幸いです。

なお、記述したコードあくまでもサンプルです。より良い記述があるかもしれません。 参考にする場合は十分にご注意ください。

参考ページ
https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/clientlibs/foundation/js/validation/index.html