Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Validate page properties on save in 6.5

Avatar

Level 4

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

 

3 Replies

Avatar

Community Advisor

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.

page-properties-validation.png

Avatar

Level 4

 

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?

 

 

Avatar

Correct answer by
Community Advisor

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