Validating the custom assetpicker(coralUI) in the overlayed pageProperties dialog | Community
Skip to main content
Level 2
December 7, 2017
Solved

Validating the custom assetpicker(coralUI) in the overlayed pageProperties dialog

  • December 7, 2017
  • 13 replies
  • 6075 views

hi All,

I have a requirement to validate a custom assetpicker field for my overlayed pageProperties dialog, in the similar fashion how the page title is getting validated. The validation for the ootb page title is handled from "/libs/cq/gui/components/siteadmin/admin/createpagewizard/page/POST.jsp", but i could not find a way on how to customize it to my needs. The assetpicker is being marked up on the dialog using coral ui(render.jsp) and the same is used on my cq:dialog.

Many thanks for your responses and guidance.

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

the validation happens client side. Not in the file you mention above.

Below is a sample to make the fileupload widget required, you can use the same.

(function(document, $, Granite) {

   "use strict";

   var CLASS = ".coral-FileUpload-input",

   DATA_VALIDATION_VALUE = "fileupload-required",

   fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error' />");

   // check for coral-id of tab, see if it's hidden, then pass the validation .
  // if dialog doesn't have tab, do regular validation

   function validateFileUpload(e) {

   var valid = true,

   validationRequired = true,

   validation = $(e).data('validation'),

   message = $(e).data('error-msg'),

   tabpanel = $(e).closest('section.coral-TabPanel-pane');

   if(typeof tabpanel !== "undefined"){

   var dialogPanel = $(tabpanel).closest("div.coral-TabPanel");

   var id = $(tabpanel).attr("id");

   var isHidden = $(tabpanel).attr("aria-hidden");

   if(typeof dialogPanel !== "undefined"){

   var thisPanel = $(dialogPanel).find("[aria-controls='"+ id +"']");

   if(typeof thisPanel !== "undefined" && $(thisPanel).hasClass("hide")){

   validationRequired = false;

  }

  }

  }

   if (validationRequired && validation && validation.indexOf(DATA_VALIDATION_VALUE) >= 0) {

   valid = $(e).closest('.coral-FileUpload').hasClass('is-filled');

   if (valid) {

   clearError(e);

  } else {

   showError(e, message);

  }

  }

   return valid;

  }

   function clearError(el) {

   var fieldSet = $(el).closest('.coral-Form-fieldwrapper'),

   field = el.closest(".coral-Form-field");

   fieldSet.removeAttr("aria-invalid").removeClass("is-invalid");

   fieldSet.find(".coral-Form-fielderror").remove();

  }

   function showError(el, message) {

   var fieldSet = $(el).closest('.coral-Form-fieldwrapper'),

   field = el.closest(".coral-Form-field"),

   error = fieldSet.find(".coral-Form-fielderror"),

   arrow = "right";

   fieldSet.attr("aria-invalid", "true").toggleClass("is-invalid", true);

   if (error.length === 0) {

   fieldSet.css('position', 'relative');

   fieldErrorEl.clone()

  .attr("data-quicktip-arrow", arrow)

  .attr("data-quicktip-content", message)

  .css('position','absolute')

  .css('top','px')

  .css('right','190px')

  .insertAfter(field);

  }

  el.blur();

  }

  $(document).on('click', ".cq-dialog-submit", function(e) {

   var fileUploads = $(this).parents('form').find(CLASS);

   fileUploads.each(function(){

   if (!validateFileUpload(this)) {

  e.stopPropagation();

  e.preventDefault();

  }

  })

  });

  $(document).on('change', '.coral-FileUpload', function(e) {

   validateFileUpload($(this).find(CLASS));

  });

})(document, Granite.$, Granite);

13 replies

smacdonald2008
Level 10
December 7, 2017

What do you mean validate this field - are you checking for a length to make sure a value has been chosen? Are you trying to verify the location of the asset? Please provide more detail on what exactly you are trying to accomplish by overlaying this component.

Level 2
December 7, 2017

By validating i mean, if the author has configured that field or not(mandatory field), i am trying to do a similar kind of implementation that we have for page title in our ootb.

smacdonald2008
Level 10
December 7, 2017

Have you placed the asset picker in the dialog yet?

Level 2
December 7, 2017

yes Scott i am calling the render.jsp of the overlayed tagfield component from the node of my dialog using sling:resourceType.

smacdonald2008
Level 10
December 7, 2017

Can you post a screenshot

smacdonald2008
Level 10
December 7, 2017

I am checking internally so see if we have any samples for this use case.

smacdonald2008
Level 10
December 7, 2017

This may make a really good community article too - overlay a component and then make the new widget mandatory.

smacdonald2008
Level 10
December 7, 2017

See this community thread too -

cq5 - How add mandatory dropdown field in Touch UI - Stack Overflow

Different granite type - but it points you in the right direction....

smacdonald2008
Level 10
December 7, 2017

Our Touch UI expert referenced this blog too to help you --

This only sets tags picker required in page properties… I guess he could do something similar for asset picker

http://experience-aem.blogspot.com/2016/08/aem-62-touch-ui-create-page-wizard-set-tags-widget-required.html

Level 2
December 7, 2017

Thanks a ton Scott, i will try some logic to implement this concept.