AEM 6420 - Touch UI Sites validate page name

Goal

In AEM Sites, validate name entered for page during creation (here the validator registered checks for lowercase letters, numbers and underscore)

For similar validation of asset file names check this post

Demo | Package Install | Github

Solution

1) Login to CRXDE Lite, create folder (nt:folder) /apps/eaem-touchui-sites-page-validation

2) Create clientlib (type cq:ClientLibraryFolder) /apps/eaem-touchui-sites-page-validation/clientlib and set property categories of String[] type to cq.sites.validations and dependencies String[] to lodash

3) Create file ( type nt:file ) /apps/eaem-touchui-sites-page-validation/clientlib/js.txt, add the following

  page-name-validate.js

4) Create file (type nt:file) /apps/eaem-touchui-sites-page-validation/clientlib/page-name-validate.js, add the following code

(function ($, $window) {
    "use strict";

    var PATTERN = /^[a-z0-9_]+$/,
        ERROR_MSG = "Acceptable characters in page name are lowercase alphabets, numbers, underscore <b>" + PATTERN + "</b>";

    $window.adaptTo("foundation-registry").register("foundation.validation.validator", {
        selector: '[data-foundation-validation~="admin.pagename"]',
        validate: function(el) {
            if (!PATTERN.test(el.value)) {
                return ERROR_MSG;
            }
        }
    });
}(jQuery, jQuery(window)));