I have a author-required media-type dropdown with options of image and video. Again video type as aem video and Vidyard options.
Solved! Go to Solution.
Topics help categorize Community content and increase your ability to discover relevant content.
@Anilkumar9 This is a custom implementation. Create one client lib within component folder and paste below code as part of js. On dialog submit target html element using JQuery with the help of one of front end dev from your team.
Link is to include clientlib as part of component.
(function($) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
let validationPassed = true;
// Target html element using JQuery with the help of front end dev
if (!selected) {
validationPassed = false;
$(".coral3-Tab.is-selected").addClass("is-invalid");
// Shw error for target element
$("target_element").after(createTooltip("Error: Maximum of " + maxItems + " tabs are allowed."));
}
return validationPassed;
});
function createTooltip(content) {
return $("<coral-tooltip>", {
class: "coral3-Tooltip coral3-Tooltip--arrowUp is-open coral3-Tooltip--error",
"aria-hidden": false,
variant: "error",
tabindex: -1,
role: "tooltip",
open: "",
id: "coral-id-645",
style: "z-index: 10020; max-width: 1422px; left: 130.498px; top: -45.0062px; display: block;",
html: $("<coral-tooltip-content>").text(content)
});
}
})(jQuery);
@Anilkumar9 This is a custom implementation. Create one client lib within component folder and paste below code as part of js. On dialog submit target html element using JQuery with the help of one of front end dev from your team.
Link is to include clientlib as part of component.
(function($) {
"use strict";
$(document).on("click", ".cq-dialog-submit", function (e) {
let validationPassed = true;
// Target html element using JQuery with the help of front end dev
if (!selected) {
validationPassed = false;
$(".coral3-Tab.is-selected").addClass("is-invalid");
// Shw error for target element
$("target_element").after(createTooltip("Error: Maximum of " + maxItems + " tabs are allowed."));
}
return validationPassed;
});
function createTooltip(content) {
return $("<coral-tooltip>", {
class: "coral3-Tooltip coral3-Tooltip--arrowUp is-open coral3-Tooltip--error",
"aria-hidden": false,
variant: "error",
tabindex: -1,
role: "tooltip",
open: "",
id: "coral-id-645",
style: "z-index: 10020; max-width: 1422px; left: 130.498px; top: -45.0062px; display: block;",
html: $("<coral-tooltip-content>").text(content)
});
}
})(jQuery);
You can also go with Foundation Validation which is a best practice while applying custom validations on dialog fields.
@Anilkumar9 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.
Views
Replies
Total Likes