Validating the custom assetpicker(coralUI) in the overlayed pageProperties dialog | Community
Skip to main content
Level 2
Dec 7, 2017 2:50 PM UTC
Solved

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

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.
kaushalmallAccepted solution
Employee
Dec 7, 2017 9:26 PM UTC

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
Dec 7, 2017 5:20 PM UTC

Have you placed the asset picker in the dialog yet?

Translate
Level 2
Dec 7, 2017 5:12 PM UTC

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.

Translate
smacdonald2008
Level 10
Dec 7, 2017 3:35 PM UTC

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.

Translate