PDA

View Full Version : [SOLVED] custom vtype with ajax validation



fabricio.landi
10 Sep 2008, 5:09 PM
Hello,

Im trying to make a form with a custom vtype with ajax validation. The form and vtype works fine but sometimes, the ajax field validation can take a while and the user can submit the form before the callback fires up submiting the field without validation :((!

A sample of the code:


Ext.apply(Ext.form.VTypes, {
username: function(value, field){
var conn = new Ext.data.Connection();
conn.request({
url: 'service.php',
method: 'POST',
params: {
"task": 'checkusername',
'username': value
},
success: function(responseObject){
var resp = responseObject.responseText;
if (resp == 0) {
field.markInvalid('This username is invalid!');
} else if (resp == 1) {
field.clearInvalid();
}
},
failure: function(){
Ext.Msg.show({title: 'error', msg: 'connection error!',});
}
});
return true;
}
});

var myform= new Ext.FormPanel({
title: 'a form',
items:[{
xtype:'textfield',
fieldLabel: 'username',
vtype:username
}],
buttons: [{
text: 'send',
type: 'submit',
handler: function(){
if (myform.getForm().isValid()) {
myform.getForm().submit({
url: 'service.php',
method: 'POST',
params: {
'task': 'createuser'
},
waitMsg: 'Sending...',
success: function(){alert('ok')},
failure: function(){alert('error'}
});
} else {
alert('connection error');
}
}
}]
});When the user hits the send button, form.isValid() is fired and the username validation connection is called next but the returns of vtype function comes before the callback response...
Can i force the vtype function to wait for callback? :-?
im doing something wrong?:">

Tanks for help!

Jonny
10 Sep 2008, 5:42 PM
Hello fabricio.landi, do you need the custom vtype? I typically do some basic client-side validation (make sure fields are not empty, etc.), and then do additional checks server-side.

So, for example, you could send this response back from your submit page:

JSON:

{ success: false, errors: {"fieldname":"This username is invalid!"} }

fabricio.landi
11 Sep 2008, 3:20 AM
Hey Jonny,

I have some server side validations too but im already using custom vtype with ajax in 4 fields... i need only a better way to call/control ajax in custom vtype!

Thanks any way

fabricio.landi
11 Sep 2008, 11:44 AM
I found a solution... Using ext-basex (http://extjs.com/forum/showthread.php?t=21681) i can make the ajax validation call to be synchronous. This way, form.isValid() waits for all ajax vtypes...

updated code using ext-basex:


Ext.apply(Ext.form.VTypes, {
username: function(value, field){
var validfield=false;
Ext.Ajax.request({
async : false,
url: 'service.php',
method: 'POST',
params: {
"task": 'checkusername',
'username': value
},
success: function(responseObject){
var resp = responseObject.responseText;
if (resp == 0) {
validfield=false;
} else if (resp == 1) {
field.clearInvalid();
validfield=true;
}
},
failure: function(){
Ext.Msg.show({title: 'error', msg: 'connection error!',});
}
});
return validfield;
}
});

var myform= new Ext.FormPanel({
title: 'a form',
items:[{
xtype:'textfield',
fieldLabel: 'username',
vtype:username
}],
buttons: [{
text: 'send',
type: 'submit',
handler: function(){
if (myform.getForm().isValid()) {
myform.getForm().submit({
url: 'service.php',
method: 'POST',
params: {
'task': 'createuser'
},
waitMsg: 'Sending...',
success: function(){alert('ok')},
failure: function(){alert('error'}
});
} else {
alert('connection error');
}
}
}]
});


Jonny, tanks for your help!

srajakaruna
20 Nov 2008, 10:44 PM
Could you please explain a bit how to do this ...

I have done the vtype correctly but .. I have the issues of .isValid() not waiting till ajax vtype

Zinnia
25 Mar 2011, 4:33 AM
could you please explain the use of url: 'service.php'

how it works

wotu
18 May 2011, 1:10 AM
my suggestion:



{success:true,'data':{"nr":"12","rodzaj":"Token","status_umowy":"Uruchomiona"}}


Ext.apply(Ext.form.VTypes, {
uslugacui: function(v,f) {
if(!f.validateajax){
f.validateajax=false;
}
if((f.lastvalidvalue!=v)||(!f.lastvalidvalue)){
f.validateajax=false;
}


if((v!='')&(!f.validateajax)){
if(!f.spr){
f.spr=f.getErrorCt().createChild('<div style="float:left; " class="loading-indicator">&nbsp;</div>');
f.spr.setVisibilityMode(Ext.Element.DISPLAY);
};
f.spr.setVisible(true);
Ext.Ajax.request({
url:'json/znajdzuslugecui',
method: 'GET',
scope:this,
params:{
nr:v
},
success: function(o) {
f.spr.setVisible(false);
var obj = Ext.decode(o.responseText);
f.lastvalidvalue=v;
if(obj.success){
this.opis(f,obj.data);
f.clearInvalid();
f.validateajax=true;
}else{
this.clear_opis(f);
f.markInvalid('Brak wniosku');
f.validateajax=false;
}
}
});
}
return f.validateajax;
},
uslugacuiText: 'Szukam... ',
//uslugacuiMask: /[\d\.]/i,
opis: function(field,dane){
this.clear_opis(field);
//field.el.addClass('is');
if(!field.opisEl){
var elp = field.getErrorCt();
field.opisEl = elp.createChild({cls:'x-form-item'});
field.on('destroy', function(){
Ext.destroy(this.opisEl);
}, field);
}
var t = new Ext.Template(
[
'<div>',

'<span style="font-size:2em; color:#1C2A47; ">{rodzaj}</span>',
'<div style="color: #999999; font-size: smaller;"> {nr} ({status_umowy})</div>',
'</div>',
],{
compiled: true
});
t.append(field.opisEl, dane);
},
clear_opis: function(field){

if(field.opisEl){;
field.opisEl.update('');
}
}
});