slightly code
<sly data-sly-use.clientlib ="/libs/granite/sightly/templates/clientlib.html">
<sly data-sly-call="${clientlib.js @ categories='videoupload'}"/>
</sly>
js code
(function($ , Coral) {
"use strict";
console.log("------------Clientlibs Loaded-----------");
var registry = $(window).adaptTo("foundation-registry");
registry.register("foundation.validation.validator", {
selector : "[data-validation = youtubeurl]",
validate : function(element) {
let el = $(element);
let url = el.val();
var youtubeRegex = /^(https?\:\/\/)?(www\.youtube\.com|youtu\.?be)\/.+/;
if (!youtubeRegex.test(url)) {
return "Enter the Youtube Url";
}
}
});
})(jQuery, Coral);
folder structure
Response
- not getting my error message
Solved! Go to Solution.
Views
Replies
Total Likes
HI @SanjayKumarDas
The way you included clientlibs will not be executing for dialog.
Please follow the below article : https://aemhints.com/2020/11/02/validating-dialog-value/
Views
Replies
Total Likes
Hi @SanjayKumarDas ,
Can you call your clientlib on the dialog and check if the JS is called, also check if your regex is correct , validate with https://regex101.com/?
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Video Upload"
sling:resourceType="cq/gui/components/authoring/dialog"
extraClientlibs="[videoupload]">
<content
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
....
Views
Replies
Total Likes
HI @SanjayKumarDas
The way you included clientlibs will not be executing for dialog.
Please follow the below article : https://aemhints.com/2020/11/02/validating-dialog-value/
Views
Replies
Total Likes
Hi @arunpatidar , thank you for the response but when i am trying with below link still not working can you help on this
https://aemhints.com/2020/11/02/validating-dialog-value/
i am adding my package here you get it from drive - https://drive.google.com/file/d/1OqW4Xzr2xil53MHr8e5MjyfRpyYbN4XH/view?usp=sharing
Views
Replies
Total Likes
HI @SanjayKumarDas
Please check this example :
Clientlibs : https://github.com/arunpatidar02/aemaacs-aemlab/tree/master/ui.apps/src/main/content/jcr_root/apps/a...
Load clientlibs in the dialog :
Views
Replies
Total Likes
Hi @SanjayKumarDas
Your config looks fine,
Just try to add few console.log
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~ Copyright Sanjay
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/** a JS file that shall be included */
(function ($, $document) {
var REGEX_SELECTOR = "wknd.simplelearn",
foundationReg = $(window).adaptTo("foundation-registry");
foundationReg.register("foundation.validation.validator", {
selector: "[data-validation='" + REGEX_SELECTOR + "']",
validate: function(el) {
var regex_pattern = /^$|^[0-9]+(\.[0-9]+){2}$/;
var error_message = "The format must be 'X.X.X'.";
var result = el.value.match(regex_pattern);
if (result === null) {
return error_message;
}
}
});
$(document).on("dialog-ready", function () {
console.log('dialog loaded')
})
$(document).on("click", ".cq-dialog-submit", function (e) {
console.log('dialog submit')
});
})($, $(document));
Views
Replies
Total Likes