Validating Dialog Value

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! 🍟

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: