Hi Team,
I have a text field which I want user to enter only characters not numbers. Is this can be achieved using property level changes like introducing a property to related text field with custom code.
Thanks.
Solved! Go to Solution.
Views
Replies
Total Likes
Hi @JakeCham ,
There is already a well defined framework to write dialog validations. Let me explain with your use case.
As this framework use jQuery code, Create a specific clientlibs to write validation code and load this clientlibs in only edit mode. You can add/load this clientlibs by adding property "extraClientlibs" to cq:dialog node.
extraClientlibs="[aemgeeks.components.author.editor]"
Add a property "validation" to your dialog field. Value of this property will be used to identify field in validation code. Basically this property will be used to map your dialog field and validation code. Let's assume you have dialog field with name property "fname".
<fname
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="First Name"
name="./fname"
validation="geeks-firstname-validation"/>
Now write code to validate your field as per your need.
In below code selector used to identify your field.
validate is used to write your own custom code for validation. Update validate code as per your need.
/* global jQuery, Coral */
(function($, Coral) {
"use strict";
var registry = $(window).adaptTo("foundation-registry");
registry.register("foundation.validation.validator", {
selector: "[data-validation=geeks-firstname-validation]",
validate: function(element) {
let el = $(element);
let pattern=/[0-9]/;
let value=el.val();
if(pattern.test(value)){
return "Please add only characters in First name";
}
}
});
})(jQuery, Coral);
Sharing file
Validation code - https://github.com/aemgeeks1212/aemgeeks/blob/master/ui.apps/src/main/content/jcr_root/apps/aemgeeks...
If you are interested to learn framework. Here are video tutorials.
https://youtu.be/wFYU1WCkRI0
You can use a small script with a regular expression in the change Event of your textfield, to check the current input and remove everyting that is not needed.
Yes possible.
Make use of "extraClientlibs", where you can load your desired client library on to your component dialog and with data-validation property, you can achieve your dialog input fields.
cq: dialog: {
jcr: primaryType: "nt:unstructured",
jcr: title: "Text",
extraClientlibs: ["category1"],
mode: "edit",
sling: resourceType: "cq/gui/components/authoring/dialog"
}
Where category1 is the category of your respective client lib.
Hi @JakeCham ,
There is already a well defined framework to write dialog validations. Let me explain with your use case.
As this framework use jQuery code, Create a specific clientlibs to write validation code and load this clientlibs in only edit mode. You can add/load this clientlibs by adding property "extraClientlibs" to cq:dialog node.
extraClientlibs="[aemgeeks.components.author.editor]"
Add a property "validation" to your dialog field. Value of this property will be used to identify field in validation code. Basically this property will be used to map your dialog field and validation code. Let's assume you have dialog field with name property "fname".
<fname
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="First Name"
name="./fname"
validation="geeks-firstname-validation"/>
Now write code to validate your field as per your need.
In below code selector used to identify your field.
validate is used to write your own custom code for validation. Update validate code as per your need.
/* global jQuery, Coral */
(function($, Coral) {
"use strict";
var registry = $(window).adaptTo("foundation-registry");
registry.register("foundation.validation.validator", {
selector: "[data-validation=geeks-firstname-validation]",
validate: function(element) {
let el = $(element);
let pattern=/[0-9]/;
let value=el.val();
if(pattern.test(value)){
return "Please add only characters in First name";
}
}
});
})(jQuery, Coral);
Sharing file
Validation code - https://github.com/aemgeeks1212/aemgeeks/blob/master/ui.apps/src/main/content/jcr_root/apps/aemgeeks...
If you are interested to learn framework. Here are video tutorials.
https://youtu.be/wFYU1WCkRI0
Views
Likes
Replies
Views
Likes
Replies
Views
Likes
Replies