Custom Validation for Coral UI 3 Multifield using foundation-validation

In this post, we will write 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 the 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 the multifield node and add additional attributes as properties that might be needed for writing validation logic. (In this case, a property named "fieldlimit" is added)
• Note: it need not always be a validation property, we can use granite:class or granite:id as selectors( based on what we want/use for identifying a 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 the multifield node:



fieldlimit property on granite:data node: