Results 1 to 4 of 4

Thread: [2.0.1][SOLVED]form isValid function return always true

  1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    89

    Default [2.0.1][SOLVED]form isValid function return always true

    Hi,
    I've a formPanel with 2 fields for password and password check.
    Code:
    {
    			id:'password',
    			name: 'data[User][password]',
    			fieldLabel: 'Password',
    			invalidText: 'Password non valida',
    			listeners: {
    				'focus': {
    					fn: users_enableSaveBtt
    				},
    				'change': {
    					fn: function(field){
    						var cpass = Ext.getCmp('users-east-region').getForm().findField('cpassword');
    						cpass.focus();
    					}
    				}
    			},
    			readOnly: false,
    			disabled: true,
    			itemCls: 'invisible',
    			cls: ''
    			
    		},{
    			id: 'cpassword',
    			fieldLabel: 'Conferma pass.',
    			invalidText: 'Password non corrispondente',
    			listeners: {
    				'focus': {
    					fn: users_enableSaveBtt
    				},
    				'blur' :{
    					fn: function(field){
    						var form = Ext.getCmp('users-east-region').getForm();
    						var password = form.findField('password').getValue();
    						if(field.getValue() != password){
    							field.markInvalid();
    						}
    						else{
    							field.clearInvalid();
    						}
    					}
    				}
    			},
    			validationEvent:false,
    			readOnly: false,
    			disabled: true,
    			itemCls: 'invisible',
    			cls: ''
    			
    		}
    The validation process works fine. Leaving the "cpassword" field if passwords aren't equals the field is marked as invalid.

    This is the code charged to submit the form
    Code:
    function(){
    					//invia il form
    					var formPnl = Ext.getCmp('users-east-region');
    					if(formPnl.getForm().isValid()){
    						//formPnl.getForm().doAction('submit',{success: function(form,action){
    						formPnl.getForm().submit({success: function(form,action){
    							if(action.result.success){
    								Ext.getCmp('users-center-region').getStore().reload();
    								form.setValues(action.result.data);
    							}
    							else{
    								Ext.MessageBox.alert('Errore','Impossibile procedere al salvataggio');
    							}
    						}});
    					}
    					else{
    						Ext.MessageBox.alert('Attenzione','Sono presenti dati non corretti');
    					}
    				}
    The problem is that also if the cpassword field is marked as invalid the check return always true.
    Code:
    if(formPnl.getForm().isValid()){
    This statement return always true. I don't know what is wrong, maybe is a bug.
    Can someone help me about this? Thanks

  2. #2
    Ext User
    Join Date
    Mar 2007
    Posts
    89

    Default

    May I do advance some suggestions to fix this thing. These are changes to Ext code to provide a logic state to the field:
    Code:
    markInvalid : function(msg){
            if(!this.rendered || this.preventMark){             return;
            }
            this.valid = false; //add this logic state to the field
            this.el.addClass(this.invalidClass);
            msg = msg || this.invalidText;
            switch(this.msgTarget){
                case 'qtip':
                    this.el.dom.qtip = msg;
                    this.el.dom.qclass = 'x-form-invalid-tip';
                    if(Ext.QuickTips){                     Ext.QuickTips.enable();
                    }
                    break;
                case 'title':
                    this.el.dom.title = msg;
                    break;
                case 'under':
                    if(!this.errorEl){
                        var elp = this.el.findParent('.x-form-element', 5, true);
                        this.errorEl = elp.createChild({cls:'x-form-invalid-msg'});
                        this.errorEl.setWidth(elp.getWidth(true)-20);
                    }
                    this.errorEl.update(msg);
                    Ext.form.Field.msgFx[this.msgFx].show(this.errorEl, this);
                    break;
                case 'side':
                    if(!this.errorIcon){
                        var elp = this.el.findParent('.x-form-element', 5, true);
                        this.errorIcon = elp.createChild({cls:'x-form-invalid-icon'});
                    }
                    this.alignErrorIcon();
                    this.errorIcon.dom.qtip = msg;
                    this.errorIcon.dom.qclass = 'x-form-invalid-tip';
                    this.errorIcon.show();
                    this.on('resize', this.alignErrorIcon, this);
                    break;
                default:
                    var t = Ext.getDom(this.msgTarget);
                    t.innerHTML = msg;
                    t.style.display = this.msgDisplay;
                    break;
            }
            this.fireEvent('invalid', this, msg);
        },
        
        clearInvalid : function(){
            if(!this.rendered || this.preventMark){             return;
            }
            this.valid = true //set the logic state to true
            this.el.removeClass(this.invalidClass);
            switch(this.msgTarget){
                case 'qtip':
                    this.el.dom.qtip = '';
                    break;
                case 'title':
                    this.el.dom.title = '';
                    break;
                case 'under':
                    if(this.errorEl){
                        Ext.form.Field.msgFx[this.msgFx].hide(this.errorEl, this);
                    }
                    break;
                case 'side':
                    if(this.errorIcon){
                        this.errorIcon.dom.qtip = '';
                        this.errorIcon.hide();
                        this.un('resize', this.alignErrorIcon, this);
                    }
                    break;
                default:
                    var t = Ext.getDom(this.msgTarget);
                    t.innerHTML = '';
                    t.style.display = 'none';
                    break;
            }
            this.fireEvent('valid', this);
        },
        
        isValid : function(){
            var valid = true;
            this.items.each(function(f){
               if(!f.valid) valid = false; //check first the logic state of the field
               else	if(!f.validate()){
                   valid = false;
               }
            });
            return valid;
        },
    Could it works? I've tested it locally and it seems to work.
    Bye

  3. #3

    Default

    the problem that you are running into is that calling markInvalid() does not effect whether the field is truly valid or night (I ran into this issue a while back).

    I would suggest instead of using the blur event, to write a validator function on your field defintion such as:
    Code:
    {
    			id: 'cpassword',
    			fieldLabel: 'Conferma pass.',
    			invalidText: 'Password non corrispondente',
                            validator: function(value) {
    			  var form = Ext.getCmp('users-east-region').getForm();
                              var password = form.findField('password').getValue();
                              if(field.getValue() != password){
                                return "passwords do not match!";
                              } else {
                                return true;
                              }
                            },
    			listeners: {
    				'focus': {
    					fn: users_enableSaveBtt
    				}
    			},
    			readOnly: false,
    			disabled: true,
    			itemCls: 'invisible',
    			cls: ''
    			
    		}

  4. #4
    Ext User
    Join Date
    Mar 2007
    Posts
    89

    Default

    Good tip! Thanks, I'll make a try.

    EDIT: It works. Thanks again.

Posting Permissions

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