Hybrid View

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    oncom is on a distinguished road

      0  

    Default Form Validation Not Running

    Form Validation Not Running


    Hello everyone,

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

    Code:
    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

  2. #2
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    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

  3. #3
    Sencha User ekolesmanasijabat's Avatar
    Join Date
    Dec 2012
    Posts
    6
    Vote Rating
    0
    ekolesmanasijabat is on a distinguished road

      0  

    Default


    Dear existdissolve,

    i have same problem like oncom has. i just using oncom's code. and i put handler code in my submitForm() method.
    Code:
    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
    Eko Lesmana Sijabat

    #Our Creator, Science, and Us#
    w: http://www.triwahana.com/
    e: eko@triwahana.com

  4. #4
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    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' ); ... ...}

  5. #5
    Sencha User ekolesmanasijabat's Avatar
    Join Date
    Dec 2012
    Posts
    6
    Vote Rating
    0
    ekolesmanasijabat is on a distinguished road

      0  

    Default


    yes, myForm is reference to the form panel.

    now my code like this.
    Code:
    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)...
    Eko Lesmana Sijabat

    #Our Creator, Science, and Us#
    w: http://www.triwahana.com/
    e: eko@triwahana.com

  6. #6
    Sencha User existdissolve's Avatar
    Join Date
    Jan 2010
    Location
    Kansas
    Posts
    522
    Vote Rating
    85
    existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice existdissolve is just really nice

      0  

    Default


    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.