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

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