The validator function works twice in the text field

Question

The following code uses the text field configurator configuration in ExtJs:

Ext.onReady(function(){ Ext.create('Ext.form.Panel', { title: 'Simple Form', width: 350, url: 'save-form.php', layout: 'anchor', defaults: { anchor: '100%' }, defaultType: 'textfield', items: [{ fieldLabel: 'First Name', validateOnBlur:true,//calling validator on blur validateOnChange:false,//not calling validator on change validator:function(){ console.log('in validator');//printing to console whenever validator is called return true; } }], renderTo: Ext.getBody() }); }); 

The validateOnBlur code is set to true, where validateOnChange is set to false.

The problem is that when the user first focuses on the field and blurred, the validation function runs twice, as shown in the screenshot.

If the user focuses the field again a second time and blurred, then the validator starts only the same as for all subsequent actions.

But for the first time, when the user focuses the field and blurs (either with a mouse click or output), the validator function runs twice.

Can someone explain what could be the possible reason for this and how can this be stopped or is this a bug in version 4.1 ExtJs?

Thanks in advance

Answer 1

I think this will solve your problem ... Blur works differently. You can use blur instead of changing and see what happens and what you want.

 items: [{ fieldLabel: 'First Name', validateOnBlur: true, listeners: { change: function (){ console.log('in validator'); return true; } } }]