Results 1 to 2 of 2

Thread: validateOnBlur: false not working on a Ext.form.NumberField

  1. #1
    Sencha User gskluzacek's Avatar
    Join Date
    Feb 2010
    Location
    Algonquin, IL
    Posts
    63
    Vote Rating
    3
      0  

    Question validateOnBlur: false not working on a Ext.form.NumberField

    I've got a simple form and wish to use the built in validation methods. However I don't want them validate the fields when the user tabs out of them or on every key press. Rather I want the fields to validate all at once, when the user click a button or something similar.

    So I've set the validationEvent and validateOnBlur to false. Setting the validationEvent to false works correctly for both TextFields and NumberFields, but setting validateOnBlur to false does not seem to work for NumberFields.

    You can see a demo of the malfunction number field here:

    http://ccbdb.com/numeric/

    The numeric field is for the range of -100 to +100 and the text field is set for a range of 0 to 5 characters.

    If you enter 6 characters in the TextField and then tab out, the field is not marked invalid as expected. When you click the validate button (calls the form's isValid() method), the TextField is marked invalid.

    However, if you enter a value of 101 in the numeric field and then tab out the field is immediately mark invalid with the red border and squiggly line.

    Thanks for any help on how to fix this.
    Regards,
    -- Greg

    And here is the code...

    number.html.txt
    number.js.txt

    Code:
    Ext.onReady(function() {
        Ext.QuickTips.init();
    	
    	var win1 = new Ext.Window({
    		title: 'My Window',
    		width: 400,
    		height: 250,
    		layout: 'fit',
    		id: 'testFormWin',
    		items: [
    			{
    				xtype: 'form',
    				border: false,
    				padding: '5 5 5 5',
    				ref: 'testForm',
    				id: 'testForm',
    				items: [
    					{
    						xtype: 'numberfield',
    						fieldLabel: 'Numeric Field',
    						anchor: '100%',
    						name: 'numericField',
    						allowDecimals: false,
    						emptyText: 'enter a positve or negative integer',
    						selectOnFocus: true,
    						maxValue: 100,
    						minValue: -100,
    						validationEvent: "false",
    						validateOnBlur: false,
    						ref: '../numericField',
    						id: 'numericField'
    					},
    					{
    						xtype: 'textfield',
    						fieldLabel: 'Another Field',
    						anchor: '100%',
    						emptyText: 'just anther field to tab into',
    						validationEvent: "false",
    						maxLength: 5,
    						validateOnBlur: false,
    						ref: '../anotherField',
    						id: 'anotherField'
    					},
    					{
    						xtype: 'textfield',
    						fieldLabel: 'Yet Another',
    						anchor: '100%'
    					}
    				]
    			} 
    		],
    		fbar: {
    			xtype: 'toolbar',
    			items: [
    				{
    					xtype: 'button',
    					text: 'Validate',
    					ref: '../validateBtn',
    					id: 'validateBtn',
    					listeners: {'click': 
    						{
    							fn: function(btn, evt) {
    								if (Ext.getCmp('testForm').getForm().isValid()) {
    									Ext.Msg.alert('validation','OK');
    								} else {
    									Ext.Msg.alert('validation','ERROR');
    								}
    							}
    						}
    					}
    				}
    			]
    		}
    	});
    	
    	win1.show();
    	
    });
    -- Once you go Mac, you never go back!

  2. #2
    Sencha User walldorff's Avatar
    Join Date
    Mar 2008
    Location
    Antwerp, Belgium
    Posts
    165
    Vote Rating
    2
      0  

    Default

    Maybe you can clear the invalid flag on blur. You can achieve this in 3 ways:
    1. with a listener in the config of the field
    PHP Code:
    xtype           'numberfield',
    fieldLabel      'Numeric Field',
    anchor          '100%',
    name            'numericField',
    allowDecimals   false,
    emptyText       'enter a positve or negative integer',
    selectOnFocus   true,
    maxValue        100,
    minValue        : -100,
    validationEvent "false",
    //validateOnBlur: false,      //  <=== is now superfluous
    ref             '../numericField',
    id              'numericField',
    listeners       : {
        
    'blur' : function(_field) {
            
    _field.clearInvalid();
        }

    2. or after the initialization
    PHP Code:
    Ext.getCmp('numericField').on('blur',function(_field) {
        
    _field.clearInvalid();
    });

    win1.show(); 
    3. or write an overwrite for Ext.form.NumberField
    ExtJS 3.4, WAMP Apache 2.2.17, PHP 5.3.5, MySQL 5.5.8

Similar Threads

  1. Replies: 0
    Last Post: 10 Feb 2011, 8:10 AM
  2. Replies: 0
    Last Post: 21 Jan 2011, 1:53 PM
  3. validateOnBlur: false not working
    By max.carvalho in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 12 Nov 2009, 2:45 AM
  4. Replies: 2
    Last Post: 30 Oct 2007, 2:11 PM
  5. Firefox 2.0 allows decimals in numberfield even though false
    By thejoker101 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 20 Mar 2007, 8:55 AM

Posting Permissions

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