Page 8 of 12 FirstFirst ... 678910 ... LastLast
Results 71 to 80 of 120

Thread: [New] Remote Field Validation Plugin

  1. #71
    Sencha User
    Join Date
    Jan 2008
    Posts
    14

    Default

    Oh, sorry Saki, i had found that the valid icon was a modification of your work done by Tasm at post #4 http://extjs.com/forum/showthread.php?p=92693#post92693
    Code:
    .x-form-valid-icon {
    	visibility:visible;
    	display:block;
    	width:16px;
    	height:18px;
    	background:transparent url(../images/design/valid.gif) no-repeat scroll 0pt 2px;
    	position:absolute;
    	top:0px;
    }
    Sorry for the mistake, I will ask him about it.
    Last edited by mystix; 5 Aug 2008 at 5:52 PM. Reason: post code in [code][/code] tags. refer to http://extjs.com/forum/misc.php?do=bbcode

  2. #72

    Question

    Hi Saki, this is a great plug-in and very useful!

    I do have a question about comboboxes. I read in a previous post that you don't have any problems with it, but I can't seem to get it to post values correctly when a user types in the box.

    For example, I'm testing to make sure the user selects a valid US state, but if they type in the box, who knows. Every time the validator is used, it comes back with an error, because incorrect values are posted.

    I'm seeing problems in two cases:

    (1) First action in box is User Typed

    Firebug tells me the following on the Console Tab (then "Post" tab):
    Code:
    field=state&value=
    Why would the value be empty? Where does it get this value from?



    Now, if I select something from the box, it works just fine. In this case, I select "Alaska" from the dropdown box, and the Firebug tells me the following:
    Code:
    field=state&value=AK
    So, all seems good. But this leads to my second problem:


    (2) User types in box AFTER a selection has been made

    After user types `asdf` in the box (after a selection was made and validated), Firebug gives this info:
    Code:
    field=state&value=AK
    It posted the last value that was selected from the box, not the actual value that was typed. Thus, it returns true as if the data passed validation, but it should not.

    Why would it not be updating the values and sending the correct data?



    Below is my code:

    Code:
         new Ext.form.ComboBox({
            fieldLabel: 'State'
          , id:'id_combobox_state'
          , hiddenName:'state'
          , name:'state'
          , store: new Ext.data.SimpleStore({
             fields: ['abbr', 'state']
           , data : Ext.comboboxdata.states // from stateList.js
          })
          , valueField:'abbr'
          , displayField:'state'
          , typeAhead: true
          , mode: 'local'
          , triggerAction: 'all'
          , emptyText:'Select a state...'
          , selectOnFocus:true
          , allowBlank:false
          , anchor:'95%'
          , plugins:[Ext.ux.plugins.RemoteValidator]
          , rvOptions: { url:'validateAccountFields.php' } 
         }) // eof new ComboBox
    Any ideas?

    Thanks in advance for the help...and thanks for the plug-in!!

  3. #73
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    It could be that getValue, that is used in validator, returns valueField but we when user types he types displayField value. Try to use getRawValue in the plugin for combo if it helps and let me know please.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  4. #74

    Default

    Quote Originally Posted by jsakalos View Post
    It could be that getValue, that is used in validator, returns valueField but we when user types he types displayField value. Try to use getRawValue in the plugin for combo if it helps and let me know please.
    I'm not sure why this didn't get posted earlier today, but I'll try again. Sorry if you get the same info twice.

    Saki, if you are talking about the change recommended by `christocracy` on pg. 2 (I think), then yes, I've already tried that, and unfortunately, I got the exact same results as the information above. Just for a sanity check, I tried it again both with and without, but same results.

    As an aside, it suffices for me in my current situation to set my combobox's parameter `editable` to false, so only the selection can occur, but this doesn't fix the problem, and I'm sure others will need a different solution.

    If there is anything else that I can try, just let me know, and I'd be more than happy to report back.

    Thanks,

    Chad

  5. #75

    Question remoteValid issues

    This should be a pretty simple question for experienced extjs coders. I want to use the remote validator plugin to validate my form data on a textfield that, at times, is filled with information from the server. For instance, if a user clicks on a combo box entry, the field will be filled with a pre-set value. Whenever I do this, I get the message that the value hasn't been validated. Now, I know that I should be able to use remoteValid somehow to stop that message, I'm just not sure how. What I tried was this inside the event handler that fills the text field's value:

    Code:
    var my_address = record.data['Address'];
    this.address.setValue(my_address);
    Ext.apply(this.address, {remoteValid:true});
    Here 'this' is the panel containing my combo box and my text field. The text field is this.address and record.data is the record selected by the combo box. Now, this code doesn't work. I've also tried the following in my text field code:

    Code:
    Pricing.CustomerAddressTF = Ext.extend(Ext.form.TextField, {
        fieldLabel : 'Address'
        ,listeners : { change : {fn : change_address} }
        ,plugins : [Ext.ux.plugins.RemoteValidator]
        ,rvOptions : {
            url : './db/change_address.php'
            ,remoteValid : true
        }
        ,initComponent:function() {
            Pricing.CustomerAddressTF.superclass.initComponent.apply(this, arguments);
        }//end initComponent
    }); //close the viewport
    and

    Code:
    Pricing.CustomerAddressTF = Ext.extend(Ext.form.TextField, {
        fieldLabel : 'Address'
        ,listeners : { change : {fn : change_address} }
        ,plugins : [Ext.ux.plugins.RemoteValidator]
        ,rvOptions : {
            url : './db/change_address.php'
        
        }
        ,remoteValid : true
        ,initComponent:function() {
            Pricing.CustomerAddressTF.superclass.initComponent.apply(this, arguments);
        }//end initComponent
    }); //close the viewport
    But that's because mostly I don't understand what was meant earlier in this forum when Saki said:
    There is one config option for that: remoteValid:true - when you are sure that form loads valid.
    I can't pass that in to a constructor, because the plugin is a singleton. So, where would I use that 'config option' if I'm using pre-configured classes?

    Thanks,
    -Eli Ribble

  6. #76
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    Try this validator and let me know how it works please. It is a successor of RemoteValidator I use but it was not published yet.
    PHP Code:
    // vim: ts=4:sw=4:nu:fdc=4:nospell
    /**
     * Ext.ux.form.ServerValidator
     *
     * @author    Ing. Jozef Sakalos
     * @copyright (c) 2008, by Ing. Jozef Sakalos
     * @date      8. February 2008
     * @version   $Id: Ext.ux.form.ServerValidator.js 250 2008-05-10 18:36:44Z jozo $
     * 
     * @license Ext.ux.form.ServerValidator is licensed under the terms of
     * the Open Source LGPL 3.0 license.  Commercial use is permitted to the extent
     * that the code/component(s) do NOT become part of another Open Source or Commercially
     * licensed development library or toolkit without explicit permission.
     * 
     * License details: http://www.gnu.org/licenses/lgpl.html
     */

    /*global Ext, console */

    /**
     * @class Ext.ux.form.ServerValidator
     * @extends Ext.util.Observable
     * @constructor
     */
    Ext.ux.form.ServerValidator = function(config) {
        
    Ext.apply(thisconfig, {
             
    url:'/request.php'
            
    ,method:'post'
            
    ,cmd:'validateField'
            
    ,paramNames:{
                 
    valid:'valid'
                
    ,reason:'reason'
            
    }
            ,
    validationDelay:500
            
    ,logFailure:true
            
    ,logSuccess:true
        
    });
        
    Ext.ux.form.ServerValidator.superclass.constructor.apply(thisarguments);
    }; 
    // eo constructor

    // extend
    Ext.extend(Ext.ux.form.ServerValidatorExt.util.Observable, {

        
    // {{{
        
    init:function(field) {
            
    this.field field;
            
    // save original functions
            
    var isValid field.isValid;
            var 
    validate field.validate;

            
    Ext.apply(field, {
                
    // is field validated by server flag
    //             serverValid: undefined !== this.serverValid ? this.serverValid : false
                 
    serverValidtrue

                 
    // private
                
    ,isValid:function(preventMark) {
                    if(
    this.disabled) {
                        return 
    true;
                    }
                    return 
    isValid.call(thispreventMark) && this.serverValid;
                }

                
    // private
                
    ,validate:function() {
                    var 
    clientValid validate.call(this);

                    
    // return false if client validation failed
                    
    if(!this.disabled && !clientValid) {
                        return 
    false;
                    }

                    
    // return true if both client valid and server valid
                    
    if(this.disabled || (clientValid && this.serverValid)) {
                        
    this.clearInvalid();
                        return 
    true;
                    }

                    
    // mark invalid and return false if server invalid
                    
    if(!this.serverValid) {
                        
    this.markInvalid(this.reason);
                        return 
    false;
                    }

                    return 
    false;
                } 
    // eo function validate

            
    }); // eo apply

            // install listeners
            
    this.field.on({
                 
    render:{single:truescope:thisfn:function() {
                    
    this.serverValidationTask = new Ext.util.DelayedTask(this.serverValidatethis);
                    
    this.field.el.on(this.validationEvent, function(e){
                        
    this.field.serverValid false;
                        
    this.filterServerValidation(e);
                    }, 
    this);
    //                this.field.el.on({
    //                    keyup:{scope:this, fn:function(e) {
    //                        this.field.serverValid = false;
    //                        this.filterServerValidation(e);
    //                    }}
    ////                    ,blur:{scope:this, fn:function(e) {
    ////                        this.field.serverValid = false;
    ////                        this.filterServerValidation(e);
    ////                    }}
    //                });
                
    }}
            });
        } 
    // eo function init
        // }}}
        
        
    ,serverValidate:function() {
            var 
    options = {
                 
    url:this.url '?#' + (this.field.name || this.name)
                ,
    method:this.method
                
    ,scope:this
                
    ,success:this.handleSuccess
                
    ,failure:this.handleFailure
                
    ,params:this.params || {}
            };
            
    Ext.applyIf(options.params, {
                 
    cmd:this.cmd
                
    ,field:this.field.name || this.name
                
    ,value:this.field.getValue()
                ,
    table:this.table
            
    });
            
    Ext.Ajax.request(options);
        } 
    // eo function serverValidate

        // {{{
        
    ,filterServerValidation:function(e) {
            if(
    this.field.value === this.field.getValue()) {
                
    this.serverValidationTask.cancel();
                
    this.field.serverValid true;
                return;
            }
            if(!
    e.isNavKeyPress()) {
                
    this.serverValidationTask.delay(this.validationDelay);
            }
        } 
    // eo function filterServerValidation
        // }}}
        // {{{
        
    ,handleSuccess:function(responseoptions) {
            var 
    o;
            try {
    Ext.decode(response.responseText);}
            catch(
    e) {
                if(
    this.logFailure) {
                    
    this.log(response.responseText);
                }
            }
            if(
    true !== o.success) {
                if(
    this.logFailure) {
                    
    this.log(response.responseText);
                }
            }
            
    this.field.serverValid true === o[this.paramNames.valid];
            
    this.field.reason o[this.paramNames.reason];
            
    this.field.validate();
        } 
    // eo function handleSuccess
        // }}}
        // {{{
        
    ,handleFailure:function(responseoptions) {
            if(
    this.logFailure) {
                
    this.log(response.responseText);
            }
        } 
    // eo function handleFailure
        // }}}
        // {{{
        
    ,log:function(msg) {
            if(
    console && console.log) {
                
    console.log(msg);
            }
        } 
    // eo function log
        // }}}

    });

    // shortcut
    Ext.ux.ServerValidator Ext.ux.form.ServerValidator;

    // register xtype
    Ext.reg('servervalidator'Ext.ux.form.ServerValidator);

    // eof 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  7. #77

    Default

    Thank you Saki for another great addon!

    Found an error though!
    Start line 95, original:
    PHP Code:
                        this.field.serverValid false;
                        
    this.filterServerValidation(e);
                    }, {
    scopethis}); 
    Fix:
    PHP Code:
                        this.field.serverValid false;
                        
    this.filterServerValidation(e);
                    }, 
    this); 
    Question: Is the 'blur'-event the best to set on validationEvent for an textfield?

  8. #78
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,664

    Default

    I have it keyup.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid MultiSearch Plugin, Grid MultiSort Plugin, Configuring ViewModel Hierarchy


  9. #79

    Default

    Ahhh, that would maybe work better! Thx!

  10. #80
    Sencha User
    Join Date
    Mar 2007
    Location
    Toronto, ON, CA
    Posts
    202

    Default

    Quote Originally Posted by jsakalos View Post
    Try this validator and let me know how it works please. It is a successor of RemoteValidator I use but it was not published yet.
    I was using the original Ext.ux.plugins.RemoteValidator and have found a problem during testing after updating Ext to 2.2 (not sure if it's related or not). I decided to give the new validator a shot, but am getting the following error when initializing: "p.init is not a function". Is the method of using Ext.ux.form.ServerValidator different than Ext.ux.plugins.RemoteValidator? If so, do you have a small example of how it can be used?

    Thanks,
    Tim

Page 8 of 12 FirstFirst ... 678910 ... 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
  •