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

[#1]

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

[#2 · Accepted solution]

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

[#3]

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...

[#4]

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!