Results 1 to 5 of 5

Thread: Define event for validator function

  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    59

    Question Define event for validator function

    Hello together

    Can somebody help me how can I set the event for the validation function?
    I'd like to fire this function at the "blur-event".

    Code:
    validator: function(){    
             if (this.textValid) {
                     return true;
         } else {        
             return false;
         }
    },
    listeners: {    
        blur: function() {        
            // Call validator function
        }
    Thanks for your help!

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    try executing isValid on the field.
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    59

    Default

    Can you explain me this in more detail? Maybe with an example. In the function of the blur event I'll do an ajax request.

    Thank you!

  4. #4
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,448
    Answers
    3997

    Default

    Code:
    field.isValid()
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    59

    Default

    Code:
    field.isValid()
    seems not to work.

    As you can read in the documentation the "markInvalid()" method doesn't change the validity of the field. As a result the "isValid()" method returns always true, althought the field was set before as invalid (with "markInvalid()" method).
    See also the following code:

    Code:
    Ext.create('Ext.form.Panel', {    title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
    
        // Fields will be arranged vertically, stretched to full width
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
    
        // The fields
        defaultType: 'textfield',
        items: [{
            fieldLabel: 'First Name',
            name: 'first'
        },{
            fieldLabel: 'Last Name',
            name: 'last',
    
            // My inserted code
            listeners: {
                blur: function(field, value) {
                   if (field.getValue() == '') {
                        field.markInvalid('Invalid');
                        field.isValid();
                   }
                }
            }
        }],
    
    
        // Reset and Submit buttons
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }, {
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true
        }],
        renderTo: Ext.getBody()
    });
    How can I change the above code, so that it affects the validity of the form itself? Accordingly the "formBind: true" config will work as expected (when the field is marked as invalid the is disabled).

    Can somebody help me?

    Note: I don't want to implement this with "allowBlank: false" or "vtype" because these will be fired on every change of the field and "vtype" doesn't work with Ajax requests(?).

    Thank you very much and regards
    extjser12


Posting Permissions

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