use before submit event of cq5 dialog

Question

I need to validate the input provided by the user in a CQ5 dialog(of a page component- opens on clicking page properties in the side kick). Some fields do not have the vtype property. I planned on using beforesubmit event of the dialog in listeners node under the dialog. For some reason the function for beforesubmit event won't get called. It behaves like the event was not added at all. I tried adding afterrender event to the same listeners node and it works. Below is excerpt from my dialog.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"             xmlns:jcr="http://www.jcp.orgjcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="cq:Dialog"  
title=""
xtype="tabpanel">
<items jcr:primaryType="cq:WidgetCollection">
</items>
<listeners
jcr:primaryType="nt:unstructured"
afterrender="function(dialog){alert(dialog);}"
beforesubmit="function(dialog){alert(dialog);}"/>
</jcr:root>

Please help me figure out how to get a function called on press of the OK button on the dialog and cancel the submit if validation fails. Thanks in advance.

I was referring to the code on the following link:

http://www.albertoalmagro.com/2012/12/complex-client-side-dialog-validation-javascript-adobe-cq5.html

Answer 1

It is because the xtype for your dialog is "tabpanel" and tabpanel doesn't have beforesubmit event.

Change the xtype to "dialog" and return false within your beforesubmit handler if your validation fails. This would prevent the dialog from getting submitted.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0"
    xmlns:jcr="http://www.jcp.orgjcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Dialog"  
    title="" xtype="dialog">
    <items jcr:primaryType="cq:WidgetCollection"></items>
    <listeners jcr:primaryType="nt:unstructured"
        beforesubmit="function(dialog){
                         if(<<!valid>>){ 
                             return false; 
                         }
                      }" />
</jcr:root>