Adobe Experience Manager Sites & More

JakeCham · 7/3/22

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.

sunil_kumar_ · 7/3/22

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

tusharbias · 7/3/22

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.

B_Sravan · 7/3/22

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.

Manu_Mathew_ · 7/3/22

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

sunil_kumar_ · 7/3/22

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