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

anshumank367659

07-12-2017

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.

Accepted Solutions (1)

Accepted Solutions (1)

kaushal_mall

Employee

07-12-2017

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);

Answers (12)

Answers (12)

anshumank367659

11-12-2017

The validation can be easily made by customizing POST.jsp present in createpagewizard. The /libs/cq/gui/components/siteadmin/admin/createpagewizard/page/POST.jsp (createpagewizard) can be overlayed in the similar hierarchical fashion as in /libs to /apps and then do the custom modifications for the exceptions based on the validation criteria.

anshumank367659

07-12-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

07-12-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.