Sometimes it is desirable to have a particular input widget in a CQ5 WCM dialog to be fitted with a custom validation. Imagine you have two password fields and you would like to validate that the passwords match prior to saving the dialog.
The Dialog
The following is a simple dialog that features two input widgets for passwords:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<password
jcr:primaryType="cq:Widget"
fieldLabel="Password"
name="./password"
allowBlank="false"
xtype="password"/>
<passwordConfirm
jcr:primaryType="cq:Widget"
fieldLabel="Confirm Password"
name="./password"
allowBlank="false"
validator="function(value) { verifyPasswords(value) }"
xtype="password"/>
</items>
</jcr:root>
Notice the validator property on the passwordConfirm input. It specifies a function that is evaluated and itself references a function, that you can easily define in a custom JavaScript file included in the head of your page in authoring mode.
Not all widgets support a validator property. You can verify support for a validator property by consulting the Ext JS API documentation. Check the Ext – form branch, e.g. TextField, of which the Password widget is an extension.
The Validator Function
The validation function itself is quite easy in this case and also runs within the scope of the widget, as such you have access to the widget’s object tree and variables. The Ext JS API documentation for the TextField states the following for the validator configuration property:
“A custom validation function to be called during field validation (defaults to null). If specified, this function will be called only after the built-in validations (allowBlank, minLength, maxLength) and any configured vtype all return true. This function will be passed the current field value and expected to return boolean true if the value is valid or a string error message if invalid.”
As such the function might look as follows in your custom JS file:
function verifyPasswords(value) {
var pwd = this.ownerCt.items.get(2).getRawValue();
if (pwd == value) {
return true;
}
return CQ.I18n.getMessage("The passwords do not match.");
}
Some Important XTypes Supporting a Validator
- datefield
- numberfield
- password
- textarea
- textfield
You can check the widget sources under /libs/cq/widgets/source/** to determine the widget hierarchy for an xtype, and whether any of the involved types support the validator property based on the Ext JS API documentation.
Validation With Regular Expression
Dialogs fields also support validation using regular expressions. See the following example:
<contentOwner
jcr:primaryType="cq:Widget"
fieldLabel="Content Owner Email"
name="./contentOwner"
regex="/^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/"
regexText="Please enter a valid email address."
xtype="textfield"/>
