How to display which field has not been filled in

Question

I'm new to AEM.

I'm working on a CQ5 scaffolding form. Several of the fields are marked with allowBlank=false which prevents the author from updating the form until they're dealt with.

The problem is that the fields are scattered through a very long form and we want to tell the user the name of the field they need to go fill in.

I can't figure out how to run javascript when the update button is clicked on the scaffold.

Answer 1

In your dialog, add a listener to register a callback for the "beforesubmit" event, such as the following:

<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="cq:Dialog"
          title="Your Component"
          xtype="dialog">
    <items jcr:primaryType="cq:TabPanel">
...
    </items>
    <listeners
            jcr:primaryType="nt:unstructured"
            beforesubmit="function(dialog){return YourNamespace.validate(this);}" />

</jcr:root>

Then, in a JavaScript file that you include any time the component is used (such as by adding a client library to the component), you can write the JavaScript you require. For example:

YourNamespace = {};

YourNamespace.validate = function (dialog) {
    var buttonText = dialog.getField('./buttonText'),
        buttonUrl = dialog.getField('./buttonUrl'),
        isValid = true,
        validMsg = 'Validation Failed: You must fill out this field.';

    if(buttonText.getValue().length > 0 && buttonUrl.getValue().length === 0){
        isValid = false;
    }

    if(!isValid){
        CQ.Ext.Msg.show({title: 'Validation Failed', msg: validMsg, buttons: CQ.Ext.MessageBox.OK, icon: CQ.Ext.MessageBox.ERROR});
        return false;
    }
};

Reference the widgets API for details on what you can do with the objects you pass in as parameters, such as the "dialog" object in the example above: https://docs.adobe.com/docs/en/cq/5-6-1/widgets-api/index.html