PDA

View Full Version : Ext.ux.Plugin.RemoteValidation



Andrewd2
13 May 2008, 12:25 PM
Based on TextField with remote validation (http://www.extjs.com/forum/showthread.php?t=4807) and Remote Field Validation Plugin (http://extjs.com/forum/showthread.php?t=19112)



Ext.namespace('Ext.ux', 'Ext.ux.Plugin');

/**
* Remote Validation
* Makes remote (server) field validation easier
* Can be applied to any(?) form field
*/
Ext.ux.Plugin.RemoteValidation = {
init:function(field) {
// apply remote validation to field
var onRender = field.onRender;
var isValid = field.isValid;
var validate = field.validate;
var onKeyup = field.onKeyup;
var onBlur = field.onBlur;
// redefinition
if (typeof this.store != 'undefined') {
var onSelect = field.onSelect;
field.onSelect=function (combo, record, index) {
onRender.call(this, combo, record, index);
this.makeRemoteValidation();
};
}
Ext.apply(field, {
currentErrorTxt:'',
remoteValid:false,
clientValid:false,
// redefinition
isValid:function(preventMark) {
return isValid.call(this, preventMark) && this.remoteValid;
},
// redefinition
validate:function() {
this.clientValid = validate.call(this);
if(!this.disabled && !this.clientValid) {
return false;
}
if(this.disabled || (this.clientValid && this.remoteValid)) {
this.clearInvalid();
return true;
}
if(!this.remoteValid) {
this.markInvalid(this.currentErrorTxt);
return false;
}
return false;
},
// redefinition
onRender : function(ct){
onRender.call(this, ct);
this.makeRemoteValidation(10);
// this.remoteCheckIcon = ct.createChild({tav:'div', cls:'x-form-remote-wait'});
// this.remoteCheckIcon.hide();
},
// redefinition
onKeyup : function(ct,e){
onKeyup.call(this, ct, e);
if(!e.isNavKeyPress()) {
this.makeRemoteValidation();
}
},
// redefinition
onBlur : function(ct){
onBlur.call(this, ct);
this.makeRemoteValidation();
},

// alignRemoteCheckIcon : function(){
// this.remoteCheckIcon.alignTo(this.el, 'tl-tr', [2, 2]);
// },

rvGetValue: function() {
if (typeof this.store != 'undefined') { // combobox
return ((!this.editable||this.forceSelection)?this.getValue():this.getRawValue());
}
switch (this.getXType()) {
case 'datefield':
return this.getValue().format(this.format);
break;
}
return this.getValue();
},
rvGetParams: function() {
var tfp = this.name+'='+this.rvGetValue();
var p = (this.paramsRemoteVal?this.paramsRemoteVal:'');
if(p){
if(typeof p == 'object')
tfp += '&' + Ext.urlEncode(p);
else if(typeof p == 'string' && p.length)
tfp += '&' + p;
}
return tfp;
},
// remote validation request
validateRemote:function() {
var v = this.getRawValue();
// don't start a remote validation if the value doesn't change (getFocus/lostFocus for example)
if( this.lastValue != v) {

this.remoteValid=false;
this.currentErrorTxt=this.waitingServerRespText;

this.lastValue = v;
if( this.rvTransaction ) {
this.rvAbort();
}
// this.alignRemoteCheckIcon();
// this.remoteCheckIcon.show();
this.rvTransaction = Ext.Ajax.request({
url:this.urlRemoteVal
,method:this.rvMethod
,success:this.successRemoteVal
,failure:this.failureRemoteVal
,scope:this
,timeout:(this.rvTimeout*1000)
,params:this.rvGetParams()
});
}
// but if remote validation error, show it! (because validateValue reset it)
else {
this.validate();
}
},
rvAbort: function(){
if(this.rvTransaction){
Ext.Ajax.abort(this.rvTransaction);
}
},
successRemoteVal: function(response,options) {
var result;
this.remoteValid = false;
this.rvTransaction = null;
// this.remoteCheckIcon.hide();
try {
result = Ext.decode(response.responseText);
if(result) {
if(result.success) {
this.remoteValid = true;
}
else {
this.currentErrorTxt = result.errors;
}
}
else {
this.currentErrorTxt = this.rvBadServerRespText;
}
}
catch(e) {
this.currentErrorTxt = this.cannotDecodeText;
}
this.validate();
},
failureRemoteVal: function(response,options) {
this.rvTransaction = null;
this.remoteValid = false;
// this.remoteCheckIcon.hide();
this.currentErrorTxt = this.rvBadComText;
this.validate();
},
makeRemoteValidation:function(t){
if (this.clientValid) {
this.remoteValidationTask.delay(t?t:this.remoteValidationDelay);
}
}
});
Ext.applyIf(field,{
remoteValidationDelay:500,
urlRemoteVal: null,
rvTimeout: 30,
rvMethod: 'POST',
waitingServerRespText:'Server has not yet validated the value',
rvBadServerRespText: 'Error: bad server response during validation',
rvBadComText: 'Error: validation unavailable',
cannotDecodeText:'Cannot decode json object'
});
field.remoteValidationTask = new Ext.util.DelayedTask(field.validateRemote, field);
}
};


Examples:

Fields:


{
xtype:'combo'
,fieldLabel:'field1'
,name:'field1[txt]'
,value: '202102000663'
,allowBlank:false

,plugins:[Ext.ux.Plugin.RemoteValidation]
,urlRemoteVal: URL
,paramsRemoteVal:{ANYPARAMS:123}

,editable:true
,typeAhead:true
,minChars:1
,store: STORE
,forceSelection:false
,displayField:'title'
,valueField:'id'
,triggerAction:'all'
}
,{
xtype:'datefield'
,fieldLabel:'field2'
,name:'field2[date]'
,value: '05-12-2007'
,allowBlank:false
,format:'d-m-Y'

,plugins:[Ext.ux.Plugin.RemoteValidation]
,urlRemoteVal: URL
,paramsRemoteVal:{ANYPARAMS:123}
}


RemoteValidation sends to URL requests like this:


Array
(
[field1] => Array
(
[txt] => 202102000663

)

[ANYPARAMS] => 123
)

(if combobox is editable=false or forceSelection=true, it sends getValue(), otherwise getRawValue())

or


Array
(
[field2] => Array
(
[date] => 05-12-2007

)

[ANYPARAMS] => 123
)


Server sends result:


Array ('success' => TRUE);

or


Array ('success' => FALSE, 'errors' => 'Error!');

mystix
13 May 2008, 6:28 PM
shouldn't that be


,plugins:[new Ext.ux.Plugin.RemoteValidation()]

instead?

never tried it your way before though, so i might be wrong.