Validating Dialog Value in AEM 6.5
Goal
Perform a validation on dialog values.
Procedure
Let’s create our dialog as follows:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Configuration"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[lab2020.validator]">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<fieldAndroid jcr:primaryType="nt:unstructured"
jcr:title="Android"
sling:resourceType="granite/ui/components/foundation/form/fieldset">
<items jcr:primaryType="nt:unstructured">
<androidVersion
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Android Version"
validation="regex.validation"
name="./androidVersion"/>
</items>
</fieldAndroid>
<fieldIos jcr:primaryType="nt:unstructured"
jcr:title="iOS"
sling:resourceType="granite/ui/components/foundation/form/fieldset">
<items jcr:primaryType="nt:unstructured">
<iosVersion
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="IOS Version"
validation="regex.validation"
name="./iosVersion"/>
</items>
</fieldIos>
</items>
</column>
</items>
</content>
</jcr:root>
As you can see, for each textfield, the property “validation” has been added. This will add the data attribute “data-validation=regex.validation” on the html of the input field and it will be used in our clientlib.
The next step is to create therefore our clientlib.
Use the following XML files:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="lab2020.validator"/>
and include the following Javascript file:
/** a JS file that shall be included */
(function($) {
var REGEX_SELECTOR = "regex.validation",
foundationReg = $(window).adaptTo("foundation-registry");
foundationReg.register("foundation.validation.validator", {
selector: "[data-validation='" + REGEX_SELECTOR + "']",
validate: function(el) {
var regex_pattern = /^$|^[0-9]+(\.[0-9]+){2}$/;
var error_message = "The format must be 'X.X.X'.";
var result = el.value.match(regex_pattern);
if (result === null) {
return error_message;
}
}
});
}(jQuery));
This example it’s really simple, it’s just to show you how to implement and trigger a validation. It can easily tested on the latest AEM versions.
A similar approach has been used to limit the number of items in a multifield, check our the article here.
Cheers! 🍟
