[4.0.1] Custom validation function appears to run multiple times

[medusadelft]

Hi,

I've got a form with a custom validation function (checkEmailAddress) for a textfield (email_addres). I've set validateOnBlur to true en validateOnChange to false (see code below).
On form display this function is called 6 times. Is this correct or did I made a mistake?

Ext.define('EX.view.member.Edit', {
    extend: 'Ext.window.Window', 
    alias : 'widget.memberedit', 
 
    title : 'Edit Member', 
    layout: 'fit', 
    autoShow: true,
    modal: true,
 
    initComponent: function() {

        this.items = [ 
            { 
                xtype: 'form', 
                bodyPadding: 10,
                submitEmptyText: false,
                defaults: {
                    msgTarget: 'side'
                },

                items: [ 
                    {
                        xtype: 'textfield',
                        name: 'initials',
                        fieldLabel: 'Initials',
                        emptyText: 'Please enter the initials',
                        focusOnToFront: true,
//                        enforceMaxLength: true,
                        maxLength: 20,
                        maxLengthText: 'The entered initials exceeds the reserved database space!',
                        width: 200
                    },
                    {
                        xtype: 'textfield', 
                        name : 'firstname', 
                        fieldLabel: 'First name',
//                        enforceMaxLength: true,
                        maxLength: 50,
                        maxLengthText: 'The entered first name exceeds the reserved database space!',
                        emptyText: 'Please enter the first name'
                    }, 
                    {
                        xtype: 'textfield', 
                        name : 'middlename', 
                        fieldLabel: 'Middle name',
                        maxLength: 20,
                        maxLengthText: 'The entered initials exceeds the reserved database space!',
                        width: 200
                    }, 
                    {
                        xtype: 'textfield', 
                        name : 'lastname', 
                        fieldLabel: 'Last name',
                        allowBlank: false,
                        blankText: 'This field can not be blank',
                        emptyText: 'Please enter the last name',
                        minLength: 2,
                        minLengthText: 'The entered last name seems to be invalid!',
                        maxLength: 200,
                        maxLengthText: 'The entered initials exceeds the reserved database space!',
                        width: 350
                    },
                    {
                        xtype: 'combo'
                        ,name: 'countries_id'
                        ,id: 'countries_id'
                        ,fieldLabel: 'Country'
                        ,store: 'Countries'
                        ,queryMode: 'local'
                        ,displayField: 'name'
                        ,valueField: 'id'
                        ,forceSelection: true
                        ,allowBlank: false
                        ,blankText: 'This field can not be blank'
                        ,emptyText: 'Please select a country'
                    },

                    objFormEmptyLine,

                    {
                        xtype: 'fieldcontainer',
                        fieldLabel: 'Gender',
                        defaultType: 'radiofield',
                        defaults: {
                            flex: 1
                        },
                        layout: 'hbox',
                        items: [
                            {
                                name: 'gender',
                                boxLabel: "<div class='mcc-icon-female-icon mcc-icon-inline' alt='female' title='female'></div> Female",
                                inputValue: 0,
                                id: 'gender1'
                            },
                            {
                                name: 'gender',
                                boxLabel: "<div class='mcc-icon-male-icon mcc-icon-inline' alt='male' title='male'></div> Male",
                                inputValue: 1,
                                id: 'gender2'
                            }
                        ]
                    },
                    {
                        xtype: 'datefield'
                        ,fieldLabel: 'Date of birth'
                        ,name: 'date_of_birth'
                        ,format: defaultDateFormat
                        ,altFormat: defaultDbDateFormat
                        ,emptyText: 'Please select the date of birth'
                        ,showToday: false
                        ,width: 200
                    },

                    objFormEmptyLine,

                    { 
                        xtype: 'textfield'
                        ,fieldLabel: 'Email'
                        ,name : 'email_address'
                        ,id: 'email_address' 
                        ,invalidText: 'The entered email address is invalid!'
                        ,vtype: 'email'
                        ,emptyText: 'Please enter the member\'s email address'
                        ,maxLength: 250
                        ,maxLengthText: 'The entered email address exceeds the reserved database space!'
                        ,width: 350
                        ,validateOnBlur: true
                        ,validateOnChange: false
                        ,validator: this.checkEmailAddress
                    },
                    objFormEmptyLine,
                    {
                        xtype: 'fieldset',
                        title: 'Allow login',
                        name: 'allow_login_frm',
                        checkboxName: 'allow_login',
                        checkboxToggle: true,
//                        collapsed: false,
                        layout: 'anchor',
                        items: [
                            {
                                xtype: 'textfield'
                                ,fieldLabel: 'Login name'
                                ,name: 'login_name'
                                ,id: 'login_name'
                                ,emptyText: 'Please enter a unique login name'
                                ,maxLength: 100
                                ,maxLengthText: 'The entered login name exceeds the reserved database space!'
                                ,width: 300
                                ,msgTarget: 'side'
                            },
                            {
                                xtype: 'textfield',
                                name: 'login_pwd',
                                fieldLabel: 'Password',
                                inputType: 'password',
                                emptyText: 'Please enter a strong password',
                                maxLength: 100,
                                maxLengthText: 'The entered login name exceeds the reserved database space!',
                                width: 300
                            }
                        ]
                    }
                ] 
            } 
        ]; 

        this.buttons = [
            {
                text: 'Save'
                ,action: 'save'
            },
            {
                text: 'Cancel'
                ,action: 'cancel'
            }
        ];

        this.callParent(arguments);
    }


    ,checkEmailAddress: function(val) {
        var form = this.up('form');
        var tmp = form.getRecord();

        var tmpFld = form.form.findField('email_address');
        if (tmpFld.originalValue == undefined) tmpFld.originalValue = '';
        if (tmpFld.originalValue != val && val.length > 0) {
            var tmpStore = Ext.data.StoreManager.lookup('Members');
            var result = tmpStore.find('email_address', val, 0, false, false, true);

            if (result > -1) return 'This email address is already used!\nPlease enter a new one.';
        }
        return true;
    }

}); 

Maurice.

[shailykamboj]

hello Maurice !
Did you find solution to your problem ? i am facing same issues , i have ValdiateOnChange as false but then too validator is getting called on every change . As i understand this config , if it is set to false then it should be called only before submit . Any idea ?


Thanks

[dr-dan]

If you don't want live validation you may want to turn off validateOnBlur in conjuncton with this (validateOnChange).