Form Validation Not Running

[oncom]

Hello everyone,

i have a window with form inside it. i made my code like this.

var required = '<span style="color:red; font-weight:bold;" data-qtip="Required">*</span>';


var submitForm = function() {
    var myForm = Ext.getCmp('formRoles');
    var data = myForm.getForm().getValues();
    console.log(myForm);
    console.log("data: " + Ext.JSON.encode(data));
};


Ext.define('ONC.view.administration.RolesAdd', {
    extend: 'Ext.window.Window',
    alias: 'widget.rolesadd',
    
    title: 'Add Roles',
    layout: 'fit',
    modal: true, 
    autoShow: true,
    width: '50%',
    
    iconCls: 'icon-user',
    
    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                id: 'formRoles',
                padding: '5 5 0 5',
                border: false,
                style: 'background-color: #fff;',
                
                fieldDefaults: {
                    anchor: '100%',
                    labelAlign: 'top',
                    labelWidth: 100,
                    labelStyle: 'font-weight: bold',
                    msgTarget: 'side'
                },
                
                items: [
                    {
                        xtype: 'textfield',
                        name: 'id',
                        fieldLabel: 'id',
                        hidden: true
                    }, {
                        xtype: 'textfield',
                        name: 'name',
                        fieldLabel: 'Name',
                        allowBlank: false,
                        afterLabelTextTpl: required
                    }, {
                        xtype: 'textareafield',
                        name: 'description',
                        fieldLabel: 'Description',
                        allowBlank: false,
                        afterLabelTextTpl: required
                    }
                ]
            }
        ];
        
        this.buttons = [
            {
                xtype: 'toolbar',
                dock: 'bottom',
                ui: 'footer',
                items: [
                    '->', 
                    {
                        iconCls: 'icon-save',
                        text: 'Save',
                        handler: submitForm
                    }, {
                        iconCls: 'icon-reset',
                        text: 'Cancel',
                        scope: this,
                        handler: this.close
                    }
                ]
            }
        ];
        
        this.callParent(arguments);
    }    
});

when i'm trying to click Save button, it's always call function submitForm without trying to running form validation before.

what do i miss here?

thank's a lot for your helping..



Best Regards,

Eko Lesmana Sijabat

[existdissolve]

The ultimate problem is that your button and handler are on the window, not the form. So the button is simply handling the click event like it should.

If you want to keep it this way (buttons on the window...it's what I prefer too), you can always do the form validation in the submitForm() method. Check out the "Example Usage" in the docs for the Form: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel

[ekolesmanasijabat]

Dear existdissolve,

i have same problem like oncom has. i just using oncom's code. and i put handler code in my submitForm() method.

var submitForm = function() {
	var myForm = Ext.getCmp('formRoles');
	alert(myForm);


	if (myForm.isValid()) {
		alert('a');
		myForm.submit({
			success: function(form, action) {
				alert('Success');
			},
			failure: function(form, action) {
				alert('Failed');
			}
		});
	}
};

but submitForm() method only execute until alert(myForm). what should i do?

Thanks.


Best Regards,

Eko Lesmana Sijabat

[existdissolve]

Do you get an error? Is myForm a reference to the form panel, or something else?

If you're running the handler on the window's button, you could always get the form like so:


var submitForm = function( btn, e, opts ) { var myForm = btn.up( 'window' ).down( 'form' ); ... ...}

[ekolesmanasijabat]

yes, myForm is reference to the form panel.

now my code like this.

var submitForm = function( btn, e, opts ) { 
	var myForm = btn.up( 'window' ).down( 'form' ).getForm().getValues();
	console.log(myForm);
	if (myForm.description == '') {
		Ext.Msg.alert('Warning', 'Insert Description');
	}
}

is this right?
if i use this code, so i made custom form validation, right? but what i want is, i want to use default form validation (afterLabelTextTpl: required)...

[existdissolve]

To use the form's built in validation (based on the rules you define per field), look back at the example in the docs, or look at this example here: http://jsfiddle.net/existdissolve/8tJR2/

You can easily call the isValid() method on the form to check the validity of the form's fields over and against their configured validation rules.