Extjs4 - remote validation

Question

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.

nscrob · Accepted Answer · 2011-11-14T12:21:37.540

12

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..

edited Nov 14 '11 at 12:21

answered Nov 14 '11 at 12:01

nscrob

4,483
1
20
24

1

Thank you very much for your answer. This only works while typing into the textfield. The textfield is always marked as valid once the textfield looses focus. I'm afraid that this also doesn't solve form.isValid() for form submitting. – gotroch Nov 14 '11 at 12:16
2

Thanks nscrob! You've made my day! – gotroch Nov 14 '11 at 13:09
Doesn't work for me on ExtJS v4.1.0. First, there's a maybe error. I assumed `params: { psc: value }` should actually be `params: { psc: newvalue }`. Secondly, my field stayed stuck on invalid., even when the JSON returned true. – alphadogg Mar 25 '13 at 18:08
First of all, did you checked why it is stuck on invalid? Debug your code, and see if it reaches clearinvalid call. Second .. do you expect to find here examples to work exactly for you, or solutions to a problem? – nscrob Mar 26 '13 at 07:34

score 0 · Answer 2 · answered Dec 01 '14 at 03:55

{
 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

Extjs4 - remote validation

2 Answers2

Linked