Level 2

Custom validation to Asset Tag fields inside metadata editor in AEM as cloud

Forum|Forum|8 months ago
May 12, 2025
2 replies
782 views

I am new to AEM DAM Assets . I am looking for i should apply custom validation to tag fields that i should allow only one tag in selection and show error in dialog. help me out how should i do custom validation.

Thanks in advance for your response.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

arunpatidar

Community Advisor

Hi @prachiat1

You need to write either a clientlibs which will be act on either on tag field or on save to validate number of tag.

Or create a custom metadata schema to change tag selector field property multiple to false.

Arun Patidar

AmitVishwakarma

Community Advisor

Hi @prachiat1 ,

Option 1: Metadata Schema (No Code – Recommended)

If you're using metadata schema editor for asset properties:

Steps:

Go to Tools > Assets > Metadata Schemas.

Edit the schema that applies to your asset type (e.g., "default").

Find the Tag field (usually of type cq/gui/components/coral/common/form/tagfield).

Set the multiple property to false.

Result:

UI will only allow one tag selection.

No custom JS required.

No save-time validation needed—user can’t add more than one.

Option 2: Custom Validation with ClientLibs (For Dialogs)

If you're dealing with custom dialogs (not metadata schema), use client-side validation.

Add these to your component:

1. Dialog XML (cq:dialog):

<tags
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/coral/common/form/tagfield"
    name="./tags"
    fieldLabel="Tags"
    multiple="{Boolean}true"
    required="{Boolean}true"
    class="validate-single-tag"
/>

2. ClientLib (under /apps/your-project/clientlibs/yourcomponent):
js/validate-tagfield.js:

(function(document, $) {
  $(document).on("dialog-ready", function() {
    $(".validate-single-tag").each(function() {
      var $field = $(this);
      var fieldName = $field.attr("name");

      $field.closest("form").on("submit", function(e) {
        var tags = $field[0].widget.value;
        if (tags && tags.length > 1) {
          e.preventDefault();
          Coral.commons.ready($field[0], function(component) {
            component.invalid = true;
            component.error = "Only one tag is allowed.";
          });
        }
      });
    });
  });
})(document, Granite.$);

3. js.txt:

validate-tagfield.js

4. Add this ClientLib to your dialog using extraClientlibs:

<extraClientlibs jcr:primaryType="nt:unstructured" 
                 cq:htmlAttributeProperties="js,css" 
                 js="[yourproject.yourcomponent]"/>

So,

Use Option 1 if you’re editing asset metadata via schema.

Use Option 2 if it’s a custom component dialog with tag fields.

Regards,
Amit