Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

AEM 6.4 Touch UI listener for validating the fields on page properties dialog before submit

Avatar

Level 2

I am facing one issue in AEm 6.4 touch ui with event listener.

When I open the page properties dialog and after configuring the field values I have to validate them if any field value is invalid I have to dispaly error message and not allow them to submit dialog before validating.

I've to trigger these error messages on clicking Save&Close buttons.

With the below code able to trigger the events but it is always submitting the dialog

(function(document, $, ns) {
"use strict";
$(document).on('foundation-form-submitted', '.granite-form-saveactivator-form', function(ev, success) {

});

})(document, Granite.$, Granite.author);

1 Accepted Solution

Avatar

Correct answer by
Level 1

You can use "blur" event, wherein when the text value is entered and the event changes from "focus" to "blur", it verifies for validation.

 

Ex:

field.addEventListener("blur", validateField);

 

 

function validateField(e){

const text = e.target.value;

 

// Add code for validation & verify.

}

 

Reference:

https://www.w3schools.com/jquery/event_blur.asp

 

 

or,

 

You can overlay the OOTB JS file that handles the Save&Close fire function, modify Save&Close button function, wherein it performs the required validation before submitting...

Reference - Overlay:

https://helpx.adobe.com/ca/experience-manager/6-4/sites/developing/using/overlays.html

View solution in original post

3 Replies

Avatar

Community Advisor

Hi,

 

We need to add e.preventDefault to avoid default behaviour and after checking the fields you can submit the form. Use below code

 

$(document).on("click", ".cq-dialog-submit", function (e) {

 

//To stop default behaviour

e.preventDefault();

//Validate fields and looks good submit using below code

$('.cq-dialog-submit').submit();
});

 

For more details:

 

https://helpx.adobe.com/experience-manager/using/creating-touchui-events.html

http://experience-aem.blogspot.com/2015/02/aem-6-sp2-touch-ui-dialog-before-submit.html

 

Hope this helps!

Avatar

Correct answer by
Level 1

You can use "blur" event, wherein when the text value is entered and the event changes from "focus" to "blur", it verifies for validation.

 

Ex:

field.addEventListener("blur", validateField);

 

 

function validateField(e){

const text = e.target.value;

 

// Add code for validation & verify.

}

 

Reference:

https://www.w3schools.com/jquery/event_blur.asp

 

 

or,

 

You can overlay the OOTB JS file that handles the Save&Close fire function, modify Save&Close button function, wherein it performs the required validation before submitting...

Reference - Overlay:

https://helpx.adobe.com/ca/experience-manager/6-4/sites/developing/using/overlays.html

Avatar

Community Advisor

if the value is invalid then return false, it will prevent saving the dialog.

 

https://experienceleaguecommunities.adobe.com/t5/Adobe-Experience-Manager/How-to-display-Saving-when...



Arun Patidar