Hi guys,
I'm willing to set a custom validation rule for a text field on my component's dialog. And for that i was following this guide:
Adobe Experience Manager Help | Validating Adobe Experience Manager Touch UI dialog values
For some unknown reason this doesn't work for me. There are any additional steps that are omitted in the guide ?
Things I made:
clientlib folder under the component node.
added category property to it.
add a js.txt and a validation.js
changed the name accordingly to my dialog.
I guess I have to include my js into the page somehow ? It's that correct ?
but every time I use <sly data-sly-call="${clientlib.js @ categories='myCateogry'}" /> i get this :
org.apache.sling.api.scripting.ScriptEvaluationException: org.apache.sling.scripting.sightly.SightlyException: data-sly-call: expression evaluates to null.
My textfield uses granite/ui/components/coral/foundation/form/textfield as resourceType.
Solved! Go to Solution.
Views
Replies
Total Likes
Hi,
You need to create your js clientLibs as cq.authoring.dialog category, then only it would be triggered when you open dialog.
No need to call in your page components.
sample code.
/*Phone Number validation*/
$.validator.register({
selector: '.field-phonenumber',
validate: function(el) {
var field,value;
field = el.closest(".coral-Form-field");
value = el.val();
if (!/^\d{3}-\d{3}-\d{4}$/.test(value)) {
return Granite.I18n.get('The field must be a phone number in the format of "xxx-xxx-xxxx"');
}
},
show: function (el, message) {
var fieldErrorEl,
field,
error,
arrow;
// fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error'>Phone Number Error</span>");
fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error' />");
field = el.closest(".coral-Form-field");
field.attr("aria-invalid", "true").toggleClass("is-invalid", true);
field.nextAll(".coral-Form-fieldinfo").addClass("u-coral-screenReaderOnly");
error = field.nextAll(".coral-Form-fielderror");
if (error.length === 0) {
arrow = field.closest("form").hasClass("coral-Form--vertical") ? "right" : "top";
fieldErrorEl
.attr("data-quicktip-arrow", arrow)
.attr("data-quicktip-content", message)
.insertAfter(field);
} else {
error.data("quicktipContent", message);
}
},
clear: function (el) {
var field = el.closest(".coral-Form-field");
field.removeAttr("aria-invalid").removeClass("is-invalid");
field.nextAll(".coral-Form-fielderror").tooltip("hide").remove();
field.nextAll(".coral-Form-fieldinfo").removeClass("u-coral-screenReaderOnly");
}
});
Views
Replies
Total Likes
Hi,
You need to create your js clientLibs as cq.authoring.dialog category, then only it would be triggered when you open dialog.
No need to call in your page components.
sample code.
/*Phone Number validation*/
$.validator.register({
selector: '.field-phonenumber',
validate: function(el) {
var field,value;
field = el.closest(".coral-Form-field");
value = el.val();
if (!/^\d{3}-\d{3}-\d{4}$/.test(value)) {
return Granite.I18n.get('The field must be a phone number in the format of "xxx-xxx-xxxx"');
}
},
show: function (el, message) {
var fieldErrorEl,
field,
error,
arrow;
// fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error'>Phone Number Error</span>");
fieldErrorEl = $("<span class='coral-Form-fielderror coral-Icon coral-Icon--alert coral-Icon--sizeS' data-init='quicktip' data-quicktip-type='error' />");
field = el.closest(".coral-Form-field");
field.attr("aria-invalid", "true").toggleClass("is-invalid", true);
field.nextAll(".coral-Form-fieldinfo").addClass("u-coral-screenReaderOnly");
error = field.nextAll(".coral-Form-fielderror");
if (error.length === 0) {
arrow = field.closest("form").hasClass("coral-Form--vertical") ? "right" : "top";
fieldErrorEl
.attr("data-quicktip-arrow", arrow)
.attr("data-quicktip-content", message)
.insertAfter(field);
} else {
error.data("quicktipContent", message);
}
},
clear: function (el) {
var field = el.closest(".coral-Form-field");
field.removeAttr("aria-invalid").removeClass("is-invalid");
field.nextAll(".coral-Form-fielderror").tooltip("hide").remove();
field.nextAll(".coral-Form-fieldinfo").removeClass("u-coral-screenReaderOnly");
}
});
Views
Replies
Total Likes