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

SOLVED

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

riteshm19780411
Level 2
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
sukohli
Correct answer by
Level 1
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

0 Replies
Ravi_Pampana
Community Advisor
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!

sukohli
Correct answer by
Level 1
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