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

riteshm19780411

17-12-2019

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

Accepted Solutions (1)

Accepted Solutions (1)

sukohli

17-12-2019

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

Answers (2)

Answers (2)

Ravi_Pampana

MVP

17-12-2019

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!