If you’re a regular follower of this blog I do apologize for some of the code snippets as they are coming out of development and are not always 100%. We’re basically blogging as we develop whilst it’s still fresh in our minds and actually have the time. So with that disclaimer I’m posting today’s great revelation on using custom Ext validation types on our APEX Ext flavoured form. I just can’t believe how easy it is….
Initially I wanted to have a dynamic client side validation for ensuring that a password and confirm password field matched. So my first step (as I’m still learning the Ext library and a newbie as I’ve only been using it for a couple of months) I did some searching on the net to see if anyone had blogged or posted something about it. I came across the following great post Adam->Blog(); which got me started (the comments were the actual gold).
I’ve used the details in the post along with an additional email check
/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*
* APEX and Ext JS Integration Kit - 2.2.1
* Copyright(c) 2009-2010, e-DBA Ltd
* apex-sig@e-dba.com
*
* http://www.e-dba.com/uk/f?p=WEBSITE:APEXTJS_LICENSE
*/
/*
Validations
*/
Ext.apply(Ext.form.VTypes, {
// Password Check
passwordText: 'The passwords entered do not match.',
password: function(value, field) {
var valid = false;
if (field.matches) {
var otherField = Ext.getCmp(field.matches);
if (value == otherField.getValue()) {
otherField.clearInvalid();
valid = true;
}
}
return valid;
},
// Phone Number check
phoneText: "Not a valid phone number. Must be in the following format: 123-4567 or 123-456-7890.",
phoneMask: /[d-]/,
phoneRe: /^(d{3}[-]?){1,2}(d{4})$/,
phone: function(v) {
return this.phoneRe.test(v);
},
// Email address check
emailText: "Not a valid email address. Must be in the following format: yourname@company.domain",
emailRe: /^(\s*[a-zA-Z0-9\._%-]+@[a-zA-Z0-9\.-]+\.[a-zA-Z]{2,4})\s*$/,
email: function(v) {
return this.emailRe.test(v);
},
// Numeric check
numericText: "Only numbers are allowed.",
numericMask: /[0-9]/,
numericRe: /(^-?dd*.d*$)|(^-?dd*$)|(^-?.dd*$)/,
numeric: function(v) {
return this.numericRe.test(v);
},
// Decimal Number check
decNumText: "Only decimal numbers are allowed.",
decNumMask: /(d|.)/,
decNumRe: /d+.d+|d+/,
decNum: function(v) {
return this.decNumRe.test(v);
}
});
When we do our item transform within the form region (see our earlier blog post) we simply set a “vtype:email” attribute which will execute our email address regular expression check
Ext.app.textFieldTransform = function(el,pAllowBlank,pvType,pID,pFormValidate,pFormCollection) {
if (el.dom.className.indexOf("aext-form-textfield") == -1) {
el.dom.className += " "+"aext-form-textfield";
var tf = new Ext.form.TextField({
"id" : el.dom.id,
"vtype" : pvType,
"allowBlank": pAllowBlank,
"applyTo" : el.dom.id
});
tf.render();
if (pFormValidate) {
tf.on({
"invalid": function(field, msg) {
Ext.app.fieldInvalid(pID,pFormCollection,this,msg);
},
"valid": function(field, msg) {
Ext.app.fieldValid(pID,pFormCollection,this,msg);
}
});
}
}
}
So thats the javascript side covered but our form is generated by APEX so how do we enable it? We define the vtype in the comments section for our form item within APEX (similar to ApexLib), and when building our JSON form metadata object in our page header via an application level PLSQL process, we simply add this vtype setting by checking the comments section of the item to see if a vtype has been enabled, i.e. we query “apex_application_page_items”. The metadata object is passed as a parameter to our create Ext form function which is defined within our region template.
Here’s an example of our metatadata object
var extR3396723937030638 = {
"title": "Manage Users",
"autoWidth": true,
"autoHeight": true,
"width": 700,
"collapsible": true,
"frame": false,
"height": 700,
"draggable": true,
"iconCls": "icon-form",
"shadow": false,
"floating": false,
"P5_DESCRIPTION": {
"dataType": "textarea",
"nullable": true
},
"P5_EMAIL_ADDRESS": {
"dataType": "string",
"nullable": false,
"vType": "email"
},
"P5_ENABLED": {
"dataType": "string",
"nullable": false
},
"P5_FIRST_NAME": {
"dataType": "string",
"nullable": false
},
"P5_KNOWN_AS": {
"dataType": "string",
"nullable": true
},
"P5_LAST_NAME": {
"dataType": "string",
"nullable": false
},
"P5_PASSWORD": {
"dataType": "password",
"nullable": false,
"vType": "password",
"matches": "P5_PASSWORD_CONFIRM"
},
"P5_USERNAME": {
"dataType": "string",
"nullable": false
},
"P5_USER_ID": {
"dataType": "int",
"decimalPrecision": 0,
"nullable": false
},
"P5_COMPANY": {
"dataType": "string",
"nullable": false
},
"P5_PASSWORD_CONFIRM": {
"dataType": "password",
"nullable": false,
"vType": "password",
"matches": "P5_PASSWORD"
}
};
And here’s our region form template javascript call, which calls our transform functions
Ext.app.apExtForm("panel#REGION_ID#", tbar#REGION_ID#, title#REGION_ID#, ext#REGION_ID#, formValidate#REGION_ID#, "#REGION_ID#");
......
Ext.app.inputFieldTransform(pPanel, pMetaObj, true, pFormCollection, pRegionId);
Ext.app.selectTransformById(pPanel, pMetaObj, true, pFormCollection);
Ext.app.textareaResizable();
My colleague mentioned that APEX 4.0 is going to provide us with client side validations and plugin capability, which is great, but I’d be surprised if the validations have been implemented as well as Ext (highlighting enabled, mouseover validation messages etc.), and event based which you can easily fire off functions to perform actions when validation failures occur. As for the plugin capability I can’t wait, I’m currently thinking that we could potentially create custom Ext email item types, phone number types, sliders, etc. Anyway it’s not out yet so I’ll reserve judgement until it is. Here’s an example screenshot from our development environment for our Ext enabled validations…
