Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Need to validate the text Field Inside Dialog(Need the Proper Way how to call the JS into component)

Avatar

Level 2

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 

Screenshot from 2024-03-22 12-28-38.png


Response 

  - not getting my error message



1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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/ 



Arun Patidar

View solution in original post

5 Replies

Avatar

Level 5

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">
....

 

 

 

Avatar

Correct answer by
Community Advisor

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/ 



Arun Patidar

Avatar

Level 2

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


 

Avatar

Community Advisor

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

 



Arun Patidar