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

Text field validation not for number to be entered

Avatar

Level 7

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.

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

Dialog - https://github.com/aemgeeks1212/aemgeeks/blob/master/ui.apps/src/main/content/jcr_root/apps/aemgeeks...

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

https://youtu.be/tsd8s8UMBRY

https://youtu.be/MaCb_2XhEUQ

 

View solution in original post

4 Replies

Avatar

Level 7

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. 

Avatar

Community Advisor

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.

Avatar

Community Advisor

@JakeCham You can use `granite:data` as attributes and use custom js to do the validations.

Avatar

Correct answer by
Community Advisor

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

Dialog - https://github.com/aemgeeks1212/aemgeeks/blob/master/ui.apps/src/main/content/jcr_root/apps/aemgeeks...

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

https://youtu.be/tsd8s8UMBRY

https://youtu.be/MaCb_2XhEUQ