Ext version tested:
  • Ext 3.3 rev beta


Adapter used:
  • ext
  • yui
  • jquery
  • prototype



Browser versions tested against:
  • Chrome
  • FF3 (firebug 1.3.0.10 installed)


Operating System:
  • Ubuntu Lucid


Description:
  • When using a field qtip to display a custom message if that field has been invalid but is now valid the invalid class isn't cleared correctly and the custom message looks like an error with exclamation mark and red border line.


Test Case:

Apply this configuration to combo, works with other fields too,

Code:
      Ext.apply(this,{
         allowBlank:false,
         listeners:{
            scope:this,
            valid:function(c){
               //c.el.dom.qclass = ''; WORKAROUND clear the class manually
               c.el.set({qtip:c.getRawValue()});
            },
            invalid:function(c){
               c.el.set({qtip:''});
            },
         },
      });


Steps to reproduce the problem:
  • ensure field is blank and is invalid state
  • enter in some information making the field valid
  • hover over field to produce qtip


The result that was expected:
  • qtip would display in normal nice blue box


The result that occurs instead:
  • qtip displays in validation error box with exclamation mark and red outline


Possible fix:
  • Code:
    Ext.form.MessageTargets = {
        'qtip' : {
    ...
            clear: function(field){
                field.el.removeClass(field.invalidClass);
                field.el.dom.qtip = '';
            }
        },
    
    changed to 
    Ext.form.MessageTargets = {
        'qtip' : {
    ...
            clear: function(field){
                field.el.removeClass(field.invalidClass);
                field.el.dom.qtip = '';
                field.el.dom.qClass ='';
            }
        },