[New] Remote Field Validation Plugin

[jsakalos]

No idea. I have no clue what is that other extension.

[attiato]

Hi Saki,
in my application I need to validate a field, considering other fields value, so I can't set all params when I'm creating the object. I need to specify params as functions and evaluate the function every time I validate the field; so I modified validateRemote:

validateRemote:function() {
    this.rvOptions.params = this.rvOptions.params || {};
    this.rvOptions.params.field = this.name;
    this.rvOptions.params.value = this.getValue();
    
    var actualOptions = {params:{}};
    for (propName in this.rvOptions.params){
        var p = this.rvOptions.params[propName];
        if (typeof p === 'function')
            actualOptions.params[propName] = p.call(this);
        else
            actualOptions.params[propName] = p;
    }
    Ext.applyIf(actualOptions,this.rvOptions);
    
    Ext.Ajax.request(actualOptions);
} 

And now I can use the plugin in this way:

{
    id: 'titolo',
    name: 'titolo',
    xtype: 'textfield',
    fieldLabel: 'Titolo',
    
    plugins:[Ext.ux.plugins.RemoteValidator],
    rvOptions: {
        url: URL.isTitoloUnivoco,
        params:{
            idCategoria: function(){return Ext.getCmp('myForm').getForm().findField('idCategoria').getValue()}
       }
    }
} 

If you want, you can use my code in plugin.

mgallinucci, thanks for sharing, i had terrible hard time to find a solution for this.
I used your modifications and it worked like a charm.

[deeprot]

There is one config option for that: remoteValid:true - when you are sure that form loads valid.

Yes, there IS an option as you said, but I'm afraid it won't help in this case since its default value (which is "fault") overrides the one in the config object. I have debugged this case.

So I suggest this solution: instead of

// apply remote validation to field
Ext.apply(field, {
     remoteValid:false
     // private
      ,isValid:function(preventMark) {
          return isValid.call(this, preventMark) && this.remoteValid;
     }
...

I use:

Ext.applyIf(field, {
      remoteValid:false
});
Ext.apply(field, {
     // private
     isValid:function(preventMark) {
          return isValid.call(this, preventMark) && this.remoteValid;
     }
...

The different thing is when to use the function apply() or applyIf(). The first one seems to override all config options, since the second one simply copies the config options if they are not set.

[jsakalos]

I've looked in my files and I've found that I do not use this plugin anymore but I use "ServerValidator". I do not have time now to make proper entries, links and demo in forum, anyway, try the following code - I'll post it proper way in a week, or so.

// vim: ts=4:sw=4:nu:fdc=4:nospell
/*global Ext, console */
/**
 * @class Ext.ux.form.ServerValidator
 * @extends Ext.util.Observable
 *
 * Server-validates field value
 *
 * @author    Ing. Jozef Sakáloš
 * @copyright (c) 2008, by Ing. Jozef Sakáloš
 * @date      8. February 2008
 * @version   1.0
 * @revision  $Id: Ext.ux.form.ServerValidator.js 645 2009-03-24 02:35:56Z 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.
 * 
 * <p>License details: <a href="http://www.gnu.org/licenses/lgpl.html"
 * target="_blank">http://www.gnu.org/licenses/lgpl.html</a></p>
 *
 * @donate
 * <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
 * <input type="hidden" name="cmd" value="_s-xclick">
 * <input type="hidden" name="hosted_button_id" value="3430419">
 * <input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-butcc-donate.gif" 
 * border="0" name="submit" alt="PayPal - The safer, easier way to pay online.">
 * <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
 * </form>
 */

Ext.ns('Ext.ux.form');

/**
 * Creates new ServerValidator
 * @constructor
 * @param {Object} config A config object
 */
Ext.ux.form.ServerValidator = function(config) {
    Ext.apply(this, config, {
         url:'/request.php'
        ,method:'post'
        ,cmd:'validateField'
        ,paramNames:{
             valid:'valid'
            ,reason:'reason'
        }
        ,validationDelay:500
        ,validationEvent:'keyup'
        ,logFailure:true
        ,logSuccess:true
    });
    Ext.ux.form.ServerValidator.superclass.constructor.apply(this, arguments);
}; // eo constructor

// extend
Ext.extend(Ext.ux.form.ServerValidator, Ext.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 : true
//             serverValid: true

             // private
            ,isValid:function(preventMark) {
                if(this.disabled) {
                    return true;
                }
                return isValid.call(this, preventMark) && 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:true, scope:this, fn:function() {
                this.serverValidationTask = new Ext.util.DelayedTask(this.serverValidate, this);
                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.name || this.field.name)
            ,method:this.method
            ,scope:this
            ,success:this.handleSuccess
            ,failure:this.handleFailure
            ,params:this.params || {}
        };
        Ext.applyIf(options.params, {
             cmd:this.cmd
            ,field:this.name || this.field.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(response, options) {
        var o;
        try {o = 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(response, options) {
        if(this.logFailure) {
            this.log(response.responseText);
        }
    } // eo function handleFailure
    // }}}
    // {{{
    ,log:function(msg) {
        if(console && console.log) {
            console.log(msg);
        }
    } // eo function log
    // }}}

}); 

Take a look also at docs: http://extjs.eu/docs/?class=Ext.ux.form.ServerValidator

[philipz]

Dear jsakalos,

Could you post html example of this new version?
Thx!

[jsakalos]

Yes, however, it is not on top of the priorities list. I plan to revamp my examples and extensions pages and port extensions to Ext 3.x first.

[Dave.Sanders]

Hey Saki,

I have a suggestion - attached is an updated serverValidate function that you might review and add in. This one allows the user to give ServerValidator a direct function (via a new property called "direct") that uses Ext.Direct to make the call instead of just hitting a url.

I'm converting a project over to Ext.Direct, and figured I would want the validators to work the same way. There is still a TODO to identify and handle failures properly, but it will take a successful Ext.Direct call, turn the result into a faked out response.responseText, and then pass that along to the success function as normal.

Hope its helpful to someone.

serverValidate:function() {
  if (this.direct == null) {
    var options = {
       url:this.url + '?#' + (this.name || this.field.name)
       ,method:this.method
       ,scope:this
       ,success:this.handleSuccess
       ,failure:this.handleFailure
       ,params:this.params || {}
     };
     Ext.applyIf(options.params, {
       cmd:this.cmd
       ,field:this.name || this.field.name
       ,value:this.field.getValue()
       ,table:this.table
     });
     Ext.Ajax.request(options);
   } else {			
     this.direct.call(this, this.field.getValue(), function(e) {
        var response={responseText:e};
	this.handleSuccess(response);
	// TODO: identify and handle failure...
     }, this);
  }
}

I snagged the code to apply this to off of your manual page, so hopefully that is the latest.

[jsakalos]

Thank you very much. I'll most likely migrate my app to direct too (well, it's too big so the decision has not been made yet).

[Dave.Sanders]

Saki,

Two other things I bumped into in implementing this version over the RemoteValidator:

1. It would be helpful to have a "data" property that I can specify in paramNames, which gets put onto the field. So, in my copy I've set it up like so in handleSuccess:

this.field.validData = o[this.paramNames.data];

So, I can pass along some data with the validation call that then goes onto field.validData.

2. I added a "beforevalidate" event that goes onto the field during the init. This then gets fired right at the top of serverValidate.

In my case, I wanted to be able to put a message up before the server communication started (or to set up a mask, or to run an animation, etc.) so I tap into beforevalidate, then use the valid, invalid events to hide my message.

I've added these to my version, but again, it might be helpful for others to have in the plugin proper.

Thanks!
Dave

[Dave.Sanders]

Actually, Valid and Invalid events on the field are being called too often for my use. I think the plugin should create two new events on the Field called "beforeValidate" and "afterValidate". These seem to suit at least my purposes better: setting up stuff to happen before the server call, and then cleaning up after those things afterwards.

Just a thought
Dave