Custom Validator Erweiterung

<%@include file="/libs/granite/ui/global.jsp" %><%
%><%@ page session="false" contentType="text/html" pageEncoding="utf-8"
           import="com.adobe.granite.ui.components.formbuilder.FormResourceManager,
         		 org.apache.sling.api.resource.Resource,
         		 org.apache.sling.api.resource.ValueMap,
         		 java.util.HashMap" %><%
    ValueMap fieldProperties = resource.adaptTo(ValueMap.class);
    HashMap values = new HashMap();
    values.put("granite:class",    "field-custom-validation-descriptor");
    values.put("fieldLabel",       i18n.get("Custom Validator"));
    values.put("name",             "./content/items/" + resource.getName() + "/granite:data/custom-validator");
    values.put("value",            fieldProperties.get("granite:data/custom-validator", String.class));
    values.put("fieldDescription", "The name of custom validator can be added here");
    FormResourceManager formResourceManager = sling.getService(FormResourceManager.class);
    Resource labelFieldResource = formResourceManager.getDefaultPropertyFieldResource(resource, values);
%>

<%@include file="/libs/granite/ui/global.jsp" %><%
%><%@ page session="false" contentType="text/html" pageEncoding="utf-8"
           import="com.adobe.granite.ui.components.formbuilder.FormResourceManager,
                org.apache.sling.api.resource.Resource,
                org.apache.sling.api.resource.ValueMap,
                java.util.HashMap" %><%
    ValueMap fieldProperties = resource.adaptTo(ValueMap.class);
    HashMap values = new HashMap();
    values.put("granite:class",    "field-custom-validation-value-descriptor");
    values.put("fieldLabel",       i18n.get("Custom Validator Value"));
    values.put("name",             "./content/items/" + resource.getName() + "/granite:data/custom-validator-value");
    values.put("value",            fieldProperties.get("granite:data/custom-validator-value", String.class));
    values.put("fieldDescription", "The value (if needed) of custom validator can be added here");
    FormResourceManager formResourceManager = sling.getService(FormResourceManager.class);
    Resource labelFieldResource = formResourceManager.getDefaultPropertyFieldResource(resource, values);
%>

/**
 * Custom validator for textbox that checks the length of the text.
 * HTML-Tags are not counted.
 *
 * Usage
 * -----
 * Add this to the Content Fragment Model field:
 * 
 */
(function ($, window) {
    'use strict';
    const VALIDATOR_ID = 'textbox-maxlength-validator';
    // Add Custom Validation / ErrorUI
    const registry = $(window).adaptTo("foundation-registry");
    registry.register('foundation.validation.validator', {
        selector: "[data-custom-validator='" + VALIDATOR_ID + "']",
        validate: function(el) {
            const maxlength = parseInt(el.getAttribute('data-custom-validator-value'));
            if(el.value && el.value.replace(/<[^>]+>/g, '').length > maxlength) {
                return Granite.I18n.get('Error: The text must not exceed {0} characters.', maxlength);
            }
        },
        show: function(el, message, ctx) {
            // modify appearance of div[contenteditable]
            const $parent = $(el).parent();
            const $input = $parent.find("[contenteditable=\"true\"]");
            $input.addClass("is-invalid");
            if (!$parent.find('.coral-Form-errorlabel').length){
                const $label = document.createElement("label");
                $label.innerHTML = message;
                $label.classList.add("coral-Form-errorlabel");
                const att = document.createAttribute("tabindex");
                att.value = "0";
                $label.setAttributeNode(att);
                $parent.append($label);
            }
        },
        clear: function(el, ctx) {
            // reset style of div[contenteditable]
            const $parent = $(el).parent();
            const $input = $parent.find("[contenteditable=\"true\"]");
            $input.removeClass("is-invalid");
            $input.removeAttr("style");
            // remove error message field
            const $label = $parent.find(".coral-Form-errorlabel");
            $label.remove();
        }
    });
}(jQuery, window));