Monday 6 May 2019

AEM - Touch UI Component Dialog Field Regex/Custom Validation

You already know the use of Granite UI widget's required property - Indicates if the field is mandatory to be filled and shows Please fill out this field , if the field is empty.


OOTB required property validation

But there are cases where the dialog fields are required custom validation with the custom error message.
The custom validations for touch UI dialog fields are very common, which required writing client side javascript/jquery code but end up writing too much code.

Wondering If we can just add few properties for regular expression based validation and it will be done without writing any code.

Solution

This solution is inspired by classic UI widget regex and regexText properties, which allow widget(field) value checked against regex property value and shows the custom error message, set in regexText property. The solution for Touch UI can be the same, which allows custom validation for Granite(Coral3) fields.


Properties

Field Level Properties

To allow custom validation, a granite:data node of type nt:unstructured will be created as the field's sibling node and following properties can be added to granite:data node(To create data attribute in HTML Dom), more details about granite:data node at granite:data :
  • regex
  • regexText
  • regexMode
  • min
  • max

Name
Type
Description
regex
String 
This is mandatory property, specify the type of validation based on values. Values can be Regular Expression, required or multifield.
regexText
String 
Specify the message to be displayed in case of field input is not valid. Invalid input is the default.
regexMode
String 
Indicates how to display error messages. Values can be inline, floating or auto. inline is default.
min
String 
Define Minimum items required for the Multifield.
max
String 
Define Maximum items allowed for the Multifield.

Note: Only regex property is mandatory, Others are optional properties. min and max both are optional and will be used if regex property value is multifield.

Configuring regex property

regex property can have the following values based on the type of validation.

Value
Description
Regular Expression
If value is set to regular expression, field will be validated against specified regular Expression string (.e.g. ^#([A-Fa-f0-9]{3}){1,2}$).
required
If the field is mandatory to be filled.
multifield
If the multifield is mandatory to have minimum or/and maximum items. In this case, min and/or max properties should be set.

granite:data node and regex & other properties





multifield min and max item validation proerties value




Note: For AEM 6.3, If regular expression contains \, regex property value should have \\.(Not required in AEM 6.4+)
Note: Since AEM removes the backslash(if not escape) as soon as the property is saved, to avoid that in AEM 6.3, use \\\\ and for 6.4+ use \\ while creating regex property value.

Tips:

For Regular Expression: \w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$ , use below values for regex property before save.

AEM 6.3 -->  ^\\\\w+([\\\\.-]?\\\\w+)*@\\\\w+([\\\\.-]?\\\\w+)*(\\\\.\\\\w{2,3})+$
AEM 6.4 and above --> ^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$

As soon as you save the property AEM will remove the extra \ and after refreshing granite:data node, regex property value should be look like below:

AEM 6.3 --> ^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$
AEM 6.4 and above --> ^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$


To make sure, regex property value is correct, regular expression can be varified from fields HTML DOM. For above regular expression (either 6.3 or 6.4 syntax), the value of data-regex attribute of fields HTML DOM should render the regular expression without escaping \ i.e. \w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$. i.e. data-regex="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"

<input class="coral-Form-field coral3-Textfield" data-regexmode="auto" data-regextext="Invalid email address" data-regex="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" type="text" name="./email" labelledby="label_c9fe8014-e6fe-40c0-91a4-f14b88980b99 description_c9fe8014-e6fe-40c0-91a4-f14b88980b99" value="" data-foundation-validation="" data-validation="" is="coral-textfield" id="coral-id-2300" aria-labelledby="label_c9fe8014-e6fe-40c0-91a4-f14b88980b99 description_c9fe8014-e6fe-40c0-91a4-f14b88980b99" aria-invalid="false">


Configuring regexMode property

Value
Description
inline
The error message will be displayed alongside field in the component dialog, similar to OOTB required property validation error.
floating
To display error message in modal(popup) window
auto
Error message will be shown in both the mode, i.e. inline as well as floating(popup).



regexMode property




inline mode error message example


Error message displays alongside field



floating mode error message example:
The popup message only displays invalid items rows in below format
  • Tab--> FieldLabel : RegexText.
  • And for multifield Tab--> FieldLabel[index] : RegexText.


Popup shows error message for invalid fields(Tab-->FieldLabel: Message)




Popup shows error message for invalid fields inside multifield(Tab-->FieldLabel[index]: Message)



in case of there is no tab in dialog or fieldLabel missing, then the message will be shown accordingly.
In below screenshot, the fieldLabel is missing except one field. 

Popup shows error message for invalid fields with Field Label(Tab--> Message)



Popup shows error message for invalid fields without tabs(FieldLabel: Message)

Dialog Level Properties:

In case of regexMode property value is floating. The popup dialog Header and content Header can also be set using the following dialog level properties, which will be added in the child node of cq:dialog node.

Name
Type
Description
regex-modal-heading
String 
This property specifies the Header text of modal(popup). Dialog cannot be submitted is default
regex-content-heading
String 
Popup dialog content header. Following Fields are invalid is default.
Getting Started







Getting Started

Prerequisites

To use solution a clienlibs of category cq.authoring.dialog needs to be created in AEM from crxde. The copy clientlibs js, css, js.txt and css.txt files from Github location (https://github.com/arunpatidar02/aem-touchui-validation/tree/master/touchui-regex-validation)
  • touchui.regex.validation.css file from css folder
  • touchui.regex.validation.js file from js folder
  • js.txt and css.txt

Create Properties

  • Create granite:data node parallel(sibling) to item node
  • Add regex and other properties




Note :
  • No need to create granite:data node for RTE(cq/gui/components/authoring/dialog/richtext) field. regex and other properties can be added directly to RTE field node.
  • For checkboxList validation(atleast one should be checked) add properties to granite/ui/components/coral/foundation/form/fieldset node.

Supports

This solution is mainly targeted for the newer version on AEM(6.3+) and for most used granite input type resources. Below is the list of supported AEM version and Resource types.

AEM Version

AEM 6.3 and above

Granite(Coral3) Resource type

  1. granite/ui/components/coral/foundation/form/textfield
  2. granite/ui/components/coral/foundation/form/numberfield
  3. granite/ui/components/coral/foundation/form/textarea
  4. cq/gui/components/authoring/dialog/richtext
  5. granite/ui/components/coral/foundation/form/select
  6. granite/ui/components/coral/foundation/form/checkbox
  7. granite/ui/components/coral/foundation/form/radiogroup
  8. granite/ui/components/coral/foundation/form/fieldset
  9. granite/ui/components/coral/foundation/form/pathfield
  10. granite/ui/components/coral/foundation/form/pathbrowser
  11. cq/gui/components/authoring/dialog/fileupload
  12. granite/ui/components/coral/foundation/form/colorfield
  13. granite/ui/components/coral/foundation/form/datepicker
  14. granite/ui/components/coral/foundation/form/multifield

Features

  • The solution is based on javascript, no need to do any server side changes or resource overlay.
  • Easy to plug-in and remove into existing aem dialog clientlibs.
  • Supports latest versions of AEM i.e. AEM 6.3, 6.4 and 6.5.
  • Supports most commonly used Granite(Coral3) resources type fields.
  • Supports with design dialog or policy(static and dynamic templates).
  • Easy to use.

Limitations

  • Doesn't support coral2 type resource type.
  • May not work in 6.2 with Granite resources.
  • Only supports Granite resources(mentioned in the Supports section)
  • The popup message does not show complete breadcrumb for the invalid item.
  • Doesn't show *(mandatory) alongside field's FieldLable text.
  • If OOTB required property and regex property both will be used for cq/gui/components/authoring/dialog/fileupload, This can result in conflict and dialog would not be submitted. Avoid using both OOTB required property validation and this custom validation together for a field. However, both type of validation can be used together for different fields for the same dialog.

Code

Sample Package


This package contains clientlibs and sample component dialog with all above fields property setup

Conclusion

This is a solution to avoid writing code for regex type of validation but this is more an idea, I hope Adobe would come up with a concrete solution like classic UI regEx validation.

3 comments:

  1. can you please try with coral3 types and what issue are you facing, can you share in details at https://github.com/arunpatidar02/aem63app-repo/issues

    ReplyDelete

AEMaaCS - Core Component's Children Editor

If you are using core components, you should be familiar with the children-editor for Tabs, Accordion, and Carousel. These components are th...

About Me

My photo
https://www.linkedin.com/in/arunpatidar26/ https://experienceleaguecommunities.adobe.com/t5/user/viewprofilepage/user-id/6786635 https://community.adobe.com/t5/user/viewprofilepage/user-id/12372253 https://forums.adobe.com/people/Arun+Patidar