Validate page properties on save in 6.5

[Leela-Pavan-Kumar]

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?

[lukasz-m]

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]

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 · Accepted solution]

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