Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Run custom validation on saving Selection Dialog

Avatar

Level 2

Hi kind community folk,

 

We're running some custom checking of multifields to ensure there are no duplicate Content Fragment entries:

 

var registry = $(window).adaptTo('foundation-registry');
registry.register("foundation.validation.validator", {

// Validator of repeated paths of selected Content fragments
selector: '.cf-paths-validation',
validate: function (element) {
var el = $(element);
var childItems = el.children('coral-multifield-item');
var values = [];
var repeat = false;

childItems.each(function () {
var childItemValue = $(this).find('input').val();

if (values.includes(childItemValue)) {
repeat = true;
} else {
values.push(childItemValue);
}
});

if (repeat) {
return 'The path for content fragments cannot be repeated';
}
}
});

However; upon testing I've discovered the loop checks the inputs properly if you directly use the foundation-autocomplete input; but if you use the Selection Dialog method (pictured) it checks the previous value of the field.

Multifield with 2 of the same content fragments. Please ignore paths of test dataMultifield with 2 of the same content fragments. Please ignore paths of test data

Select a new -Content Fragment-Select a new -Content Fragment-

Error is still triggered as previous value was checkedError is still triggered as previous value was checked

Does anyone know how to change to above to reflect what we're after or how to detect when the Selection Dialog selection has updated the input?

Regards,

Graham

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

You need to write show and clear functions as well

 

interface FoundationValidationValidator {
  /**
   * Only the element satisfying the selector will be validated.
   */
  selector: string;
  /**
   * The actual validation function. It must return a string of error message
   * if the element fails.
   */
  validate: (element: Element) => string;
  /**
   * The function to show the error.
   */
  show: (element: Element, message: string, ctx: FoundationValidationValidatorContext) => void;
  /**
   * The function to clear the error.
   */
  clear: (element: Element, ctx: FoundationValidationValidatorContext) => void;
}

 

https://blogs.perficient.com/2017/11/06/aem-touch-ui-dialog-validation-new-best-practice-use-foundat... 



Arun Patidar

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi,

You need to write show and clear functions as well

 

interface FoundationValidationValidator {
  /**
   * Only the element satisfying the selector will be validated.
   */
  selector: string;
  /**
   * The actual validation function. It must return a string of error message
   * if the element fails.
   */
  validate: (element: Element) => string;
  /**
   * The function to show the error.
   */
  show: (element: Element, message: string, ctx: FoundationValidationValidatorContext) => void;
  /**
   * The function to clear the error.
   */
  clear: (element: Element, ctx: FoundationValidationValidatorContext) => void;
}

 

https://blogs.perficient.com/2017/11/06/aem-touch-ui-dialog-validation-new-best-practice-use-foundat... 



Arun Patidar

Avatar

Level 2

Thanks Arun,

 

I'll have a look at this today and update 

 

Regards,

Graham