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);
Solved! Go to Solution.
Views
Replies
Total Likes
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
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!
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
if the value is invalid then return false, it will prevent saving the dialog.
Views
Replies
Total Likes