Use granite:data on textfield | Community
Skip to main content
M
MaynorSong
Level 2
October 19, 2020
Solved

Use granite:data on textfield

  • October 19, 2020
  • 2 replies
  • 5547 views

I am trying to create a validation function for a textfield depending on the content of other textfield in a cq dialog in AEM 6.5.

I am trying to send within the cq:data the textfield name but I can get AEM to render these data attributes on DOM.

 

This is a piece of the cq dialog

<creditsTitle
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits Title"
  name="./creditsTitle_t"/>
<creditsValue
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits"
  validation="custo-validation"
  name="./creditsValue_t">
  <granite:data jcr:primaryType="nt:unstructured"
   dependent-name="creditsTitle_t"/> </creditsValue>

And here is a ss of what gets rendered:

 
 

 

I want to be able to send to the "custo-validation" a parameter with the name of the field that it needs to check,in this case is the one above (creditsTitle_t), but it can be anywhere.

So far the only way I have found is with the granite:data but i can't get it working

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 Manjunath_K

Hi @maynorsong ,

Create dialog validation js with below code & category name "cq.authoring.dialog", then add your custom input validation logic based on these two input field values.

 

(function(ns, $, $document){
  $(window).adaptTo("foundation-registry").register("foundation.validation.validator",{
      selector: "[data-validation='custo-validation']",
      validate: function(el){
        var creditsValue = el.value;
        var creditsTitleValue =  $('[name="./creditsTitle_t"]').val();

        if(creditsValue && !creditsTitleValue){//add custom input validation code here based on two input field values.
          return "Please Configure Credits Title";
        }
      }
  });
})(Granite.author, Granite.$, Granite.$(document));

 

<creditsTitle
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits Title"
  name="./creditsTitle_t"/>
<creditsValue
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits"
  validation="custo-validation"
  name="./creditsValue_t">

 

Hope this helps!

2 replies

Vijayalakshmi_S
Vijayalakshmi_S
Level 10
October 19, 2020

Hi @maynorsong,

Could you please elaborate on exact validation/logic you are trying to achieve with two text fields. 

In particular, significance of term "can be anywhere" from your query in original post.

    M
    MaynorSongAuthor
    Level 2
    October 19, 2020

    validation="custo-validation" name="./creditsValue_t">

    <granite:data jcr:primaryType="nt:unstructured" dependent-name="creditsTitle_t"/>

    </creditsValue>

     

    Mostly that part i want to send the dependent name as a data html attribute but is not being shown. that's my main problem. Can I use granite:data on textfields?

    Manjunath_K
    Manjunath_KAccepted solution
    Level 7
    October 19, 2020

    Hi @maynorsong ,

    Create dialog validation js with below code & category name "cq.authoring.dialog", then add your custom input validation logic based on these two input field values.

     

    (function(ns, $, $document){
      $(window).adaptTo("foundation-registry").register("foundation.validation.validator",{
          selector: "[data-validation='custo-validation']",
          validate: function(el){
            var creditsValue = el.value;
            var creditsTitleValue =  $('[name="./creditsTitle_t"]').val();

            if(creditsValue && !creditsTitleValue){//add custom input validation code here based on two input field values.
              return "Please Configure Credits Title";
            }
          }
      });
    })(Granite.author, Granite.$, Granite.$(document));

     

    <creditsTitle
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits Title"
  name="./creditsTitle_t"/>
<creditsValue
  jcr:primaryType="nt:unstructured"
  sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
  fieldLabel="Credits"
  validation="custo-validation"
  name="./creditsValue_t">

     

    Hope this helps!

      M
      MaynorSongAuthor
      Level 2
      October 19, 2020

      I was trying to avoid hardwiring the r creditsTitleValue = $('[name="./creditsTitle_t"]').val(); . I want the name to be dynamic. That is why I am trying to send it with granite:data so i can grab it from the DOM, but i cant render it.

       

      Is it possible to add granite data to textfield? That's my main problem

      Terms & ConditionsAccessibility statement

      Loading footer...