Text field validation not for number to be entered | Community
Skip to main content
JakeCham
JakeCham
Level 6
July 3, 2022
Solved

Text field validation not for number to be entered

  • July 3, 2022
  • 4 replies
  • 1214 views

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.

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by sunil_kumar_

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/components/content/author/_cq_dialog/.content.xml

Validation code - https://github.com/aemgeeks1212/aemgeeks/blob/master/ui.apps/src/main/content/jcr_root/apps/aemgeeks/components/content/author/clientlibs/editor/js/author.js

If you are interested to learn framework. Here are video tutorials.
https://youtu.be/wFYU1WCkRI0

https://youtu.be/tsd8s8UMBRY

https://youtu.be/MaCb_2XhEUQ

 

4 replies

T
Adobe Employee
Tushar_GuptaAdobe Employee
Adobe Employee
July 3, 2022

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
    Community Advisor
    B_SravanCommunity Advisor
    Community Advisor
    July 3, 2022

    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_
      Community Advisor
      Manu_Mathew_Community Advisor
      Community Advisor
      July 3, 2022

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

        sunil_kumar_
        sunil_kumar_Accepted solution
        Level 5
        July 3, 2022

        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/components/content/author/_cq_dialog/.content.xml

        Validation code - https://github.com/aemgeeks1212/aemgeeks/blob/master/ui.apps/src/main/content/jcr_root/apps/aemgeeks/components/content/author/clientlibs/editor/js/author.js

        If you are interested to learn framework. Here are video tutorials.
        https://youtu.be/wFYU1WCkRI0

        https://youtu.be/tsd8s8UMBRY

        https://youtu.be/MaCb_2XhEUQ

         

          Terms & ConditionsAccessibility statement

          Loading footer...