Validate page properties on save in 6.5 | Community
Skip to main content
Leela-Pavan-Kumar
Leela-Pavan-Kumar
Level 4
January 12, 2022
Solved

Validate page properties on save in 6.5

  • January 12, 2022
  • 1 reply
  • 1795 views

Hi,

 

I want to validate page properties after saving a page and based on the validations need to show an Error or allow to save that page.

 

I tried with below JS wherein it failing when ever a required field in page properties is filled and trying to save the page it is saving even it is not a valid case.

$(document).on("foundation-contentloaded", function(e) { $("#id1, #id2").on("click", function() { validate(); }); $(".foundation-fixedanchor .coral3-Button--primary").on("click", function() { validate(); }); $(".foundation-wizard-control .coral3-Button--primary").on("click", function() { validate(); }); $("#id3").on("change keyup focus", function() { validate(); }); });

 

Is there any way that we can do validation after saving the page and show an error alert if it fails?

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 lukasz-m

@leela-pavan-kumarthis is definitely possible, but it will require some additional script. Please have a look on below example - it is not production ready - but in general it meets criteria you have describe. There are 2 elements, XML structure that contains radio group section and text field for ID. Second part is very simple javascript that should be registered as a client lib that will be available within page properties.

 

<rights jcr:primaryType="nt:unstructured" jcr:title="Rights" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <radiogroup jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/radiogroup"> <items jcr:primaryType="nt:unstructured"> <option1 jcr:primaryType="nt:unstructured" name="./rights" sling:resourceType="granite/ui/components/foundation/form/radio" text="Public" value="public"/> <option2 jcr:primaryType="nt:unstructured" name="./rights" sling:resourceType="granite/ui/components/foundation/form/radio" text="Private" value="private"/> </items> </radiogroup> <id jcr:primaryType="nt:unstructured" fieldLabel="ID" name="./id" sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/> </items> </rights>(function(window, document, $, Granite) { 'use strict'; $('input[type="radio"]').click(function(){ if ($(this).is(':checked')) { var cmp = $('input[name*="./id"]') if ($(this).val() == 'private') { cmp.attr('aria-required', 'true'); } if ($(this).val() == 'public') { cmp.removeAttr('aria-required'); cmp.removeAttr('aria-invalid'); } } }); })(window, document, Granite.$, Granite);

 

1 reply

lukasz-m
Community Advisor
lukasz-mCommunity Advisor
Community Advisor
January 12, 2022

Hi @leela-pavan-kumar, did you consider to use required property. This will give you result like below - it is used i.e. by OOTB Title field. Author is not able to save page properties until he sets title value.

You can find page properties implementation under /libs/wcm/foundation/components/basicpage/v1/basicpage/tabs.

    Leela-Pavan-Kumar
    Leela-Pavan-KumarAuthor
    Level 4
    January 12, 2022

     

    Hi @lukasz-m ,

     

    Fields in Page Properties:

     

    Rights : (Radio Group, Mandatory)
     - Public (Radio Button)
     - Private (Radio Button)

ID : (Text Field)

    We have a radio group where in public and private options are there and this is mandatory & Text field which is not mandatory

     

     

    If an author selects

    • Public - ID (Text Field) is optional
    • Private - ID(Text Field) is mandatory

     

    Finally , This ID(Text Field)  needs to be dynamically mark as required if it is private.

     

    Can we do this in AEM 6.5?

     

     

      lukasz-m
      Community Advisor
      lukasz-mCommunity AdvisorAccepted solution
      Community Advisor
      January 12, 2022

      @leela-pavan-kumarthis is definitely possible, but it will require some additional script. Please have a look on below example - it is not production ready - but in general it meets criteria you have describe. There are 2 elements, XML structure that contains radio group section and text field for ID. Second part is very simple javascript that should be registered as a client lib that will be available within page properties.

       

      <rights jcr:primaryType="nt:unstructured" jcr:title="Rights" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <radiogroup jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/radiogroup"> <items jcr:primaryType="nt:unstructured"> <option1 jcr:primaryType="nt:unstructured" name="./rights" sling:resourceType="granite/ui/components/foundation/form/radio" text="Public" value="public"/> <option2 jcr:primaryType="nt:unstructured" name="./rights" sling:resourceType="granite/ui/components/foundation/form/radio" text="Private" value="private"/> </items> </radiogroup> <id jcr:primaryType="nt:unstructured" fieldLabel="ID" name="./id" sling:resourceType="granite/ui/components/coral/foundation/form/textfield"/> </items> </rights>(function(window, document, $, Granite) { 'use strict'; $('input[type="radio"]').click(function(){ if ($(this).is(':checked')) { var cmp = $('input[name*="./id"]') if ($(this).val() == 'private') { cmp.attr('aria-required', 'true'); } if ($(this).val() == 'public') { cmp.removeAttr('aria-required'); cmp.removeAttr('aria-invalid'); } } }); })(window, document, Granite.$, Granite);

       

        Terms & ConditionsAccessibility statement

        Loading footer...