Monday, September 17, 2018

How to Enable Custom Validation on multifield Touch UI - Adobe Experience Manager(AEM)

How to Enable Custom Validation on multifield Touch UI - Adobe Experience Manager(AEM)


This post explain the details on enabling Custom Validation on multifield Touch UI.

Define the Touch UI dialog for the component, the XML structure of the dialog is below

<?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="63 Collapsible Multifield"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[touchmulti.email.validation]">
    <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">
                    <products
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        eaem-show-on-collapse="EAEM.showProductName"
                        fieldLabel="Products">
                        <field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./products">
                            <items jcr:primaryType="nt:unstructured">
                                <column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
                                    <items jcr:primaryType="nt:unstructured">
                                        <product
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldDescription="Name of Product"
                                            fieldLabel="Product Name"
                                            name="./product"/>
                                        <email
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                                            fieldLabel="Email"
                                            name="./email"/>
                                    </items>
                                </column>
                            </items>
                        </field>
                    </products>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

touch_ui_multifield_dialog


Enable the validation for Email:


The form should not be submitted if there is atleast one error with email.
Error field should be highlighted with different 

Define a cq:ClientLibraryFolder node under the component, name it clientlibs and add the following properties.

categories (String[]) - <define category name> e.g touchmulti.email.validation

touch_ui_multifield_clientlibs_validation
Create js.txt and validation.js under clientlibs folder.

Add the below script in validation.js

(function (document, $, ns) {
    "use strict";
    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.stopPropagation();
        e.preventDefault();
 
        var $form = $(this).closest("form.foundation-form"),
$inputs = $form.find("[name='./email']"),
$input=null,
emailid,
        isError=false,
        patterns = {
             emailadd: /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i
        };
$inputs.each(function(index, input) {
            $input = $(input);
    emailid=$input.val();
if(emailid != "" && !patterns.emailadd.test(emailid) && (emailid != null)) {
  isError=true;
              $input.css("border", "2px solid #FF0000");
              ns.ui.helpers.prompt({
              title: Granite.I18n.get("Invalid Input"),
              message: "Please Enter a valid Email Address",
              actions: [{
                id: "CANCEL",
                text: "CANCEL",
                className: "coral-Button"
              }],
              callback: function (actionId) {
                if (actionId === "CANCEL") {
                }
              }
              });
        }else
        {
          $input.css("border", "");
        }
        });
    if(!isError){
           $form.submit();
        }
});
})(document, Granite.$, Granite.author);


Add validation.js inside js.txt

Add the below property in cq:dialog node

extraClientlibs String[] - touchmulti.email.validation (the client library defined in the previous step)

touch_ui_multifield_dialog_extra_client_libs

Now add the component to a page and author it


The error message will be displayed if the email address is invalid in any one of the field and also the email fields will be marked in red border on error, the form will be submitted on correcting all the email issues.

multiform_validation_error

multifieldform_validation_error

This has been developed and tested in AEM 6.4.


No comments:

Post a Comment