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

[SanjayKumarDas]

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

[anupampat]

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

[arunpatidar · Accepted solution]

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/ 

[SanjayKumarDas]

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

[arunpatidar]

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 : 

https://github.com/arunpatidar02/aemaacs-aemlab/blob/e31fc62bfd147e56ecaca740c6e2739c66c75f75/ui.app... 

[arunpatidar]

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