cq5-dialog-validation

This simple script provides a basic validation of CQ5 dialogs, since validations of some xtypes like multifiels are not correctly applied. allowBlank="false" works fine for xtype textfield, but for multifield it always marks the field as invalid (I don't know wy) so, I've decided to implement an on beforesubmit solution.

Plugin functions

dialog ( cqJs.dialog )
- validate ( cqJs.dialog('validate' , dialog) )
  - This function should be called on "beforesubmit" event and evalues all required fields. Each required field that is empty is marked as a 'has-error' field.
- setup ( cqJs.dialog('setup' , dialog) )
  - Setup should be fired on 'loadcontent' dialog event and is in charge of checking the previous fields states. Each required field that has validation errors is marked as 'has-error' field.
validate ( cqJs.validate )
- isEmpty ( cqJs.dialog('isEmpty' , value) )
  - Returns true if a field value is empty considering all supported types.
- notEmpty ( cqJs.dialog('notEmpty' , value) )
  - Returns true if a field value is NOT empty considering all supported types.

Supported xtypes

[TextField] (http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.form.TextField)
[MultiField] (http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.form.MultiField)
[RichText] (http://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.form.RichText)

Considerations of dialog.xml

Register listeners

	<!-- We should register both beforesubmit and loadcontent handlers -->
	<!-- beforesubmit: handles beforesubmit event, checking all fields marked as required and preventing default if -->
	<!-- some of them fails -->
	<!-- loadcontent: handles on loadcontent event, checking if some of the values is not valid and marking them as invalid -->
	<!-- this function is needed to update dialog and avoid previous error states -->
    <listeners 
        jcr:primaryType="nt:unstructured"   
        beforesubmit="function(dialog){ return cqJs.dialog('validate' , dialog); }"
        loadcontent="function(dialog){  return cqJs.dialog('setup' , dialog); }"  />

Mark fields as required

To set fields as required, we only need to add a CSS class to the widget as follows:

Multifield

<!-- since this multifield is marked as required (cls="required"), will be checked on beforesubmit -->
<mfOne 
    jcr:primaryType="cq:Widget" 
    fieldLabel="Multifield One"
    name="./multifieldOne"
    cls="required"
    xtype="multifield" />

Textfield

<tfTwo 
  	jcr:primaryType="cq:Widget" 
  	fieldLabel="Textfield Two"
  	name="./textFieldOne"
  	cls="required"
  	xtype="textfield" />

The important directive is cls="required" since the plugin uses Field.hasClass() function to determine which fields are required.

Note that with

<tfTwo 
  	jcr:primaryType="cq:Widget" 
  	fieldLabel="Textfield Two"
  	name="./textFieldOne"
  	cls="required"
  	allowBlank="false"
  	validator="function(value) { return cqJs.validate('notEmpty' , value); }"
  	xtype="textfield" />

We can use cqDialogValidator.valueIsEmpty(value) to perfome a validation in onchange event (as mentioned, allowBlank does not work properly in multifield).

Richtext

<rtOne
	jcr:primaryType="cq:Widget"
	fieldLabel="Rich Text One"
	name="./richTextOne"
	xtype="richtext"
	cls="required"
	allowBlank="false"/>

Styling

This is the default extjs style, but if you want you can create your own one, you just need to consider the css selector div.x-panel.x-form-invalid

/* provide a better styling if you want! */
/* this is the default style */
div.x-panel.x-form-invalid {
	border-color: #ff7870 !important;
	border-width: 1px !important;
}

##To be continued As i said, this is a very basic validation plugin, and is ment to be extended with other common xtypes. For now, this have solved my problems but I'm sure I'll face some other xtypes issues and then I'll update the script. Hope this helps!

dfontan / cq5-dialog-validation