Page 1 of 2 12 LastLast
Results 1 to 10 of 26

Thread: TextField with remote validation

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default TextField with remote validation

    Hello,

    This is a TextField class with remote validation possibility. You can specify if the validation must occur on blur or on validate.
    The server must return a JSON object or boolean exactly like form validation.

    true // it's all good
    or
    { success: true } // it's all good
    or
    {success:false,
    errors:'Explication text' // text display on error
    }

    Example
    Code:
            new Ext.form.TextFieldRemoteVal({
                ... // Config object from TextField
                // New possibility
    	   remoteValidation: 'onValidate', 		// When start remote validation, value: 'onBlur' or 'onValidate'
    	   urlRemoteVal: 'url', 					// Url for remote validation
    	   method: 'POST', 						// Optional, method for remote validation 'GET' or 'POST', default POST 
    	   paramsRemoteVal: { w: 'testPseudo' }, 	// Optional, additional parameter(s) (Object or String)
    	   timeout: 30, 							// Optional, timeout for validation request, default 30	
    	   badServerRespText: 'My text', 			// Optional, text showing after bad server response, default: 'Error: bad server response during validation'
    	   badComText: 'My text' 					// Optional, text showing after incorrect comunication, default: 'Error: validation unavailable'
            }),
    The class:
    Code:
    Ext.form.TextFieldRemoteVal = function(config){
        Ext.form.TextFieldRemoteVal.superclass.constructor.call(this, config);
    	if( this.urlRemoteVal ) {
    		if( this.remoteValidation == 'onValidate' ) {
    			this.on('valid', this.startRemoteVal.createDelegate(this));
    		}else if( this.remoteValidation == 'onBlur' ) {
    			this.on('blur', this.startRemoteVal.createDelegate(this));
    		}
    	}
    };
    
    Ext.extend(Ext.form.TextFieldRemoteVal, Ext.form.TextField, {
    	remoteValidation: null, /* 'onValidate' or 'onBlur' */
    	urlRemoteVal: null,
    	timeout: 30,	
    	method: 'POST',
    	badServerRespText: 'Error: bad server response during validation',
    	badComText: 'Error: validation unavailable',
    	
    	// redefinition 
    	onRender : function(ct){
    		Ext.form.TextFieldRemoteVal.superclass.onRender.call(this, ct);
    		
    		this.remoteCheckIcon = ct.createChild({tav:'div', cls:'x-form-remote-wait'});
    		this.remoteCheckIcon.hide();
    	},
    	
    	// private
    	alignRemoteCheckIcon : function(){
            this.remoteCheckIcon.alignTo(this.el, 'tl-tr', [2, 2]);
        },
    	
    	// private
    	getParams: function() {
            var tfp = (this.name||this.id)+'='+this.getValue();
            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;
    	},
    	
    	// public
    	startRemoteVal: function() {
    		var v = this.getValue();
    		if( this.lastValue != v ) { // don't start a remote validation if the value doesn't change (getFocus/lostFocus for example)
    			this.lastValue = v;
    			if( this.transaction ) {
    				this.abort();
    			}
    			this.alignRemoteCheckIcon();
    			this.remoteCheckIcon.show();
    			var params = this.getParams();
    			this.transaction = Ext.lib.Ajax.request(
    					            this.method,
    					            this.urlRemoteVal + (this.method=='GET' ? '?' + params : ''),
    					            {success: this.successRemoteVal, failure: this.failureRemoteVal, scope: this, timeout: (this.timeout*1000)},
    					            params);
    		}
    	},
    	
    	// public
    	abort : function(){
    		if(this.transaction){
    			Ext.lib.Ajax.abort(this.transaction);
    		}
    	},
    	
    	// private
    	successRemoteVal: function(response) {
    		this.transaction = null;
    		this.remoteCheckIcon.hide();
    		var result = this.processResponse(response);
    		if(result) {
    			if(result.errors) {
    				this.markInvalid(result.errors);
    				this.isValid = false;
    			}
    		}else{
    			this.markInvalid(this.badServerRespText);
    			this.isValid = false;
    		}
    	},
    	
    	// private
    	failureRemoteVal: function(response) {
    		this.transaction = null;
    		this.remoteCheckIcon.hide();
    		this.markInvalid(this.badComText);
    		this.isValid = false;
    	},
    	
    	// private
    	processResponse: function(response) {
            return (!response.responseText ? false : Ext.decode(response.responseText));
        }
    
    });
    Needed CSS class:
    Code:
    .x-form-remote-wait {
    	width:100%;
    	height:19px;
    	width:19px;
    	background-image:url(../../resources/images/default/grid/wait.gif);
    	background-repeat:no-repeat;
    	display:block;
    	position:absolute;
    }
    Attached Images Attached Images

  2. #2
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    3
      0  

    Default

    Thanks for sharing this!

    Seems to be pretty nice, i will definitivly use it

  3. #3
    Ext User
    Join Date
    Apr 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default Bug fix! sorry

    I want to go too quickly...
    On getFocus/lostFocus and value doesn't change that maintains the text of the error now, because TextField.validateValue() reset it.

    Code:
    Ext.form.TextFieldRemoteVal = function(config){
        Ext.form.TextFieldRemoteVal.superclass.constructor.call(this, config);
    	if( this.urlRemoteVal ) {
    		if( this.remoteValidation == 'onValidate' ) {
    			this.on('valid', this.startRemoteVal.createDelegate(this));
    		}else if( this.remoteValidation == 'onBlur' ) {
    			this.on('blur', this.startRemoteVal.createDelegate(this));
    		}
    	}
    };
    
    Ext.extend(Ext.form.TextFieldRemoteVal, Ext.form.TextField, {
    	remoteValidation: null, /* 'onValidate' or 'onBlur' */
    	urlRemoteVal: null,
    	timeout: 30,	
    	method: 'POST',
    	badServerRespText: 'Error: bad server response during validation',
    	badComText: 'Error: validation unavailable',
    	
    	// redefinition 
    	onRender : function(ct){
    		Ext.form.TextFieldRemoteVal.superclass.onRender.call(this, ct);
    		
    		this.remoteCheckIcon = ct.createChild({tav:'div', cls:'x-form-remote-wait'});
    		this.remoteCheckIcon.hide();
    	},
    	
    	// private
    	alignRemoteCheckIcon : function(){
            this.remoteCheckIcon.alignTo(this.el, 'tl-tr', [2, 2]);
        },
    	
    	// private
    	getParams: function() {
            var tfp = (this.name||this.id)+'='+this.getValue();
            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;
    	},
    	
    	// public
    	startRemoteVal: function() {
    		var v = this.getValue();
    		// don't start a remote validation if the value doesn't change (getFocus/lostFocus for example)
    		if( this.lastValue != v ) {
    			this.lastValue = v;
    			if( this.transaction ) {
    				this.abort();
    			}
    			this.alignRemoteCheckIcon();
    			this.remoteCheckIcon.show();
    			var params = this.getParams();
    			this.transaction = Ext.lib.Ajax.request(
    					            this.method,
    					            this.urlRemoteVal + (this.method=='GET' ? '?' + params : ''),
    					            {success: this.successRemoteVal, failure: this.failureRemoteVal, scope: this, timeout: (this.timeout*1000)},
    					            params);
    		}
    		// but if remote validation error, show it! (because validateValue reset it)
    		else if( !this.isValid ) {
    			this.markInvalid(this.currentErrorTxt);
    		}
    	},
    	
    	// public
    	abort : function(){
    		if(this.transaction){
    			Ext.lib.Ajax.abort(this.transaction);
    		}
    	},
    	
    	// private
    	successRemoteVal: function(response) {
    		this.transaction = null;
    		this.remoteCheckIcon.hide();
    		var result = this.processResponse(response);
    		if(result) {
    			if(result.errors) {
    				this.currentErrorTxt = result.errors;
    				this.markInvalid(this.currentErrorTxt);
    				this.isValid = false;
    			} else {
    				this.isValid = true;
    			}
    		}else{
    			this.currentErrorTxt = this.badServerRespText;
    			this.markInvalid(this.currentErrorTxt);
    			this.isValid = false;
    		}
    	},
    	
    	// private
    	failureRemoteVal: function(response) {
    		this.transaction = null;
    		this.remoteCheckIcon.hide();
    		this.currentErrorTxt = this.badComText;
    		this.markInvalid(this.currentErrorTxt);
    		this.isValid = false;
    	},
    	
    	// private
    	processResponse: function(response) {
            return (!response.responseText ? false : Ext.decode(response.responseText));
        }
    
    });

  4. #4
    Ext User
    Join Date
    Apr 2007
    Posts
    379
    Vote Rating
    0
      0  

    Default

    Pretty slick! Worked like a champ, thanks for posting!

  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default

    it's so cool

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    NL
    Posts
    608
    Vote Rating
    1
      0  

    Default

    Thanks for sharing!!

    Marco

  7. #7
    Ext User
    Join Date
    Mar 2007
    Location
    Stamford, CT
    Posts
    17
    Vote Rating
    0
      0  

    Default

    A dumb question but I have an excuse - I am pretty new here :-) How do we use this? Do you have an example.

  8. #8
    Ext User
    Join Date
    Apr 2007
    Posts
    8
    Vote Rating
    0
      0  

    Default

    it so cool,but i got a problem whern use it ,
    code:

    PHP Code:
     new Ext.form.TextFieldRemoteVal({
        
    fieldLabel'userName
        ,name: '
    userInfo.username'
        , width: 100
        ,remoteValidation: '
    onValidate'              ,urlRemoteVal: '/NewgxuAdmin/TestValid.jsp'                     // Url for remote validation
        ,method: '
    POST'                                ,timeout: 30                                 ,badServerRespText: 'My text '                         ,badComText: 'My text'                         
    }) 
    server response
    {success:false, errors:'User name exists'}

    it seems working,but, i can't see the errors 'User name exists' any where?

  9. #9
    Ext User
    Join Date
    Apr 2007
    Posts
    7
    Vote Rating
    0
      0  

    Default

    Hello afuski,
    The location of error text depends on the config option 'msgTarget' (inheritance from Ext.form.Field). If you don't specify it, the default value is 'qtip'. So you should before initialize quicktips. Example:

    Code:
    Ext.QuickTips.init();
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    Hope it helps you...

  10. #10
    Ext User
    Join Date
    Apr 2007
    Posts
    8
    Vote Rating
    0
      0  

    Default

    thanks Caolga ,it working now...

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •