CODEWITHSUNDEEP
extjsextjs4validation
gotroch
gotroch

Reputation: 105

Extjs4 - remote validation

I'd like having a remote validator for a textfield. My PHP returns true/false value. I've tried something like this:

{
   xtype: 'textfield',
   fieldLabel: 'Field',
   allowBlank: false,
   validator : function(value) {
      Ext.Ajax.request({
      url: 'psc/validate',
      params: { psc: value },
      success: function(response){
       return response.responseText                             
      }
      });
   });
}

The problem is that ajax request is asynchonous and the validator gives "values not defined" error. Is there any callback? So I would return false by default and make textfield valid once ajax call would be finished.

I've tried to google for extjs remote validation but there is not much about it.

Anybody help or suggestions? Thanks.

Upvotes: 10

Views: 7182

Answers (2)

atarky S
atarky S

Reputation: 1

{
 fieldLabel : 'Username',
 name : 'username',
 allowBlank : false,
 validFlag : true,
 validator : function() {
  return this.validFlag;
 },
 listeners : {
  'change' : function(textfield, newValue, oldValue) {
   var me = this;
   Ext.Ajax.request({
    url : 'rest/users?action=validate&username=' + newValue,
    success : function(response) {
     // Ausuming responseText is {"valid" : true}
     me.validFlag = Ext.decode(response.responseText).valid ? true : 'The username is duplicated!';
     me.validate();
    }
   });
  }
 }
}

this html code i tested(extjs version is 5.0) ,is ok ,it is from TonyTuan'sBlog , all of this you can see this link : http://code.tonytuan.org/2013/06/extjs-remote-validator-for-form-field.html

Upvotes: 0

nscrob
nscrob

Reputation: 4483

maybe you shouldnt use the validator then, add a listner on change for the textfield and use the methods markInvalid and clearInvalid for displaying the validation.

{
   xtype: 'textfield',
   fieldLabel: 'Field',
   allowBlank: false,
   textValid: false,
   validator: function(){
       return this.textValid;
   },
   listeners : {
     'change': function(textfield,newValue,oldValue) {
        Ext.Ajax.request({
          url: 'psc/validate',
          params: { psc: value },
          scope: textfield,
          success: function(response){
             if (response.responseText){
               this.clearInvalid();
               this.textValid = true;
             } else {
               this.markInvalid('field is not valid');
               this.textValid = false;
             }                             
          }
        });
      }       
   }
}

I haven;t tried it but could work for your aproach

EDIT i've made some modifications to the code to include the validator..

Upvotes: 12

Related Questions