Custom Validation for Coral UI 3 Multifield using foundation-validation

In this post, we will write a custom validation for Coral UI3 Multifield resource and for the fields used as part of multifield using foundation-validation and making use of granite:data(common attributes)

Multifield Resource Type : granite/ui/components/coral/foundation/form/multifield
Constraint : Limit the number of multifield items that can be authored
Validation name : multi-validate

Steps for adding validation:
  • Create a folder named  "dialogfieldvalidations" within your project(like one stop place for all custom validations) -> create clientlibs folder of type cq:clientLibraryFolder under the folder created.(categories : cq.authoring.dialog/any other name with inclusion of the same via embeds or per your project clientlib structure)
  • Create script.js file and add code related to all custom validations with js.txt file for including the script.js file
Usage:

  • Create a property named "validation" with the value registered with foundation.validation.validator in script.js file (In this case, multi-validate is used)
  • Create"granite:data" node under multifield node and add additional attributes as properties that might be needed for writing validation logic. (In this case, property named "fieldlimit" is added)
    • Note: it need not always be validation property, we can use granite:class or granite:id as selectors( based on what we want/use for identifying particular resource). Just that using validation seems more appropriate.
    • If field within multifield, say textfield needs to be validated, same can be written and by simply using respective selector on field node will help validate.
Code on Github: Validation Script

Screenshots for reference:
Dialog displaying validation message: (when the field items are added greater than the limit specified)


Validation property on multifield node:


fieldlimit property on granite:data node:



Comments

Post a Comment

Popular posts from this blog

Embedding Third party dependency/OSGi bundle in AEM application hosted in AEMasCS

OSGI Factory Configuration implementation

Creation of Template Types for Editable templates