Ext-JS Form TextArea Validation Q

Question

I've implemented some validation in my form by extending the form.VTypes class to include another vtype that I personally made. However I am unsure if this is the best path to go, for starters I want to control when the validation happens (onBlur). I want to also display a checkmark when it is valid and have the submit value be disabled until the form is filled out correctly.

I've been digging around to see how the Ext-JS API textfield's validator attribute works, but I can't find a good example of it. Does the validateOnBlur work using it? I'm trying to see how all these different validation attributes / methods are supposed to work together. I don't know what I am supposed to call what when.

EDIT** I have it set now so that the send button is only enabled after it runs isValid(false) on each textfield. Apparently this works for both my VType validation and my allowBlank:false I set. However I do not understand how to execute another method when its actually valid... I saw the valid public event, but I was unsure when I could call it (an example would be awesome)

Sean Adkinson Sean Adkinson · Accepted Answer · 2011-04-02T19:55:48

Something that can get most of what you want done without much effort is using monitorValid: true on the Ext.form.FormPanel, and adding formbind: true to the form's buttons.

new Ext.form.FormPanel({
    monitorValid: true,
    items: [{
            xtype: 'textfield',
            allowBlank: false
            ...
        }, {
            xtype: 'textarea',
            vtype: 'customvtype'
        }],
    buttons: [{
        text: 'Submit',
        formbind: true
    }]
});

When using monitorValid, the form will also fire a clientValidation event that you can use to listen for other actions to perform when the form becomes valid.

Ext-JS Form TextArea Validation Q

1 Answers