Hybrid View

  1. #1
    Ext User
    Join Date
    Apr 2007
    Posts
    7
    Vote Rating
    0
    Caolga is on a distinguished road

      0  

    Default TextField with remote validation

    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

  2. #2
    Ext JS Premium Member dj's Avatar
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    573
    Vote Rating
    2
    dj has a spectacular aura about dj has a spectacular aura about dj has a spectacular aura about

      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
    Caolga is on a distinguished road

      0  

    Default Bug fix! sorry

    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
    sfwalter is on a distinguished road

      0  

    Default


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

  5. #5
    Ext User
    Join Date
    May 2007
    Posts
    7
    Vote Rating
    0
    jax is on a distinguished road

      0  

    Default


    it's so cool

  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    NL
    Posts
    607
    Vote Rating
    1
    mdissel is on a distinguished road

      0  

    Default


    Thanks for sharing!!

    Marco

  7. #7
    Ext User
    Join Date
    Mar 2007
    Location
    Stamford, CT
    Posts
    17
    Vote Rating
    0
    patspats is on a distinguished road

      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
    afusky is on a distinguished road

      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
    Caolga is on a distinguished road

      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
    afusky is on a distinguished road

      0  

    Default


    thanks Caolga ,it working now...