1. #1
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    802
    Vote Rating
    23
    pkellner will become famous soon enough pkellner will become famous soon enough

      0  

    Default How to Add Password/ConfirmPassword textboxes with validation to form w/SA

    How to Add Password/ConfirmPassword textboxes with validation to form w/SA


    I've got a typical form where I want the user to enter the password and a confirmation of the password and i want them to be validated to be the same. How can I do that with an SA project?

    Code:
     items: [
                    {
                        xtype: 'textfield',
                        itemId: 'username',
                        inputId: 'username',
                        fieldLabel: 'Username',
                        allowBlank: false
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'password',
                        inputId: 'password',
                        inputType: 'password',
                        fieldLabel: 'Password',
                        allowBlank: false
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'passwordConfirm',
                        inputId: 'passwordConfirm',
                        inputType: 'password',
                        fieldLabel: 'Confirm Password'
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'email',
                        inputId: 'email',
                        fieldLabel: 'Email Address',
                        allowBlank: false,
                        vtype: 'email'
                    }
                ]

  2. #2
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,305
    Vote Rating
    107
    ssamayoa is just really nice ssamayoa is just really nice ssamayoa is just really nice ssamayoa is just really nice

      0  

    Default


    Find attached a simple custom component., import it in your SA.

    Delete your "passwordConfirm" field then add the one I'm giving to you and set "initialPassField" to "password", I mean, itemId of your first password field.

    Note that component has an override so you must edit and change the application part in the class names.

    Regards.

    PasswordConfirm.xdc
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  3. #3
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    802
    Vote Rating
    23
    pkellner will become famous soon enough pkellner will become famous soon enough

      0  

    Default


    Thanks!

    I think I followed your directions but I can't get it to show validated when my two fields are the same.

    Here is my code

    Code:
    Ext.define('RegistrationApp.view.override.PasswordConfirm', {
    	override: 'RegistrationApp.view.PasswordConfirm',
    	vtype: 'password'
    }, function() {
    	Ext.apply(Ext.form.field.VTypes, {
    		password : function(val, field) {
    			if (field.initialPassField) {
    				var container = field.up('form');
    				if (!container) {
    					container = field.up("container");
    				}
    				var pwd = container.down('#' + field.initialPassField);
    				if (!pwd) {
    					pwd = container.down('[name=' + initialPassField + ']');
    				}
    				return (val == pwd.getValue());
    			}
    			return true;
    		},
    		passwordText : 'Password Confirmation',
    	});
    });

    Code:
    Ext.define('RegistrationApp.view.PasswordConfirm', {
        extend: 'Ext.form.field.Text',
        alias: 'widget.passwordconfirm',
    
    
        requires: [
            'RegistrationApp.view.override.PasswordConfirm'
        ],
    
    
        initialPassField: 'password',
        inputType: 'password',
    
    
        initComponent: function() {
            var me = this;
    
    
            me.callParent(arguments);
        }
    
    
    });
    Code:
    Ext.define('RegistrationApp.view.createAccount', {
        extend: 'Ext.form.Panel',
        alias: 'widget.createAccountAlias',
    
    
        requires: [
            'RegistrationApp.view.PasswordConfirm'
        ],
    
    
        itemId: 'CreateAccount',
        bodyPadding: 10,
        title: 'My Form',
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.applyIf(me, {
                dockedItems: [
                    {
                        xtype: 'toolbar',
                        dock: 'top',
                        itemId: 'ToolBarAttendeeSpeaker',
                        layout: {
                            pack: 'end',
                            type: 'hbox'
                        },
                        items: [
                            {
                                xtype: 'button',
                                disabled: false,
                                itemId: 'backButtonId',
                                iconAlign: 'right',
                                text: 'Back'
                            },
                            {
                                xtype: 'tbseparator'
                            },
                            {
                                xtype: 'button',
                                formBind: true,
                                disabled: true,
                                itemId: 'continueButtonId',
                                iconAlign: 'right',
                                text: 'Continue'
                            }
                        ]
                    }
                ],
                items: [
                    {
                        xtype: 'textfield',
                        itemId: 'username',
                        width: 300,
                        inputId: 'username',
                        fieldLabel: 'Username',
                        allowBlank: false
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'password',
                        width: 300,
                        inputId: 'password',
                        inputType: 'password',
                        fieldLabel: 'Password',
                        allowBlank: false
                    },
                    {
                        xtype: 'passwordconfirm',
                        width: 300,
                        fieldLabel: 'Confirm Password'
                    },
                    {
                        xtype: 'textfield',
                        itemId: 'email',
                        inputId: 'email',
                        fieldLabel: 'Email Address',
                        allowBlank: false,
                        vtype: 'email'
                    }
                ]
            });
    
    
            me.callParent(arguments);
        }
    
    
    });
    Last edited by pkellner; 18 Feb 2013 at 7:38 PM. Reason: forgot override class

  4. #4
    Sencha Premium Member
    Join Date
    May 2010
    Location
    Guatemala, Central America
    Posts
    1,305
    Vote Rating
    107
    ssamayoa is just really nice ssamayoa is just really nice ssamayoa is just really nice ssamayoa is just really nice

      0  

    Default


    Try setting initialPassField in the linked field.

    Regards.
    UI: Sencha Architect 3.x / ExtJS 4 & 5
    Server side: JEE / EJB 3.x / CDI / JPA 2.x/ JAX-RS / JasperReports
    Application Server: Glassfish / WildFly
    Databases: Oracle / DB2 / MySQL / Firebird

    If you like my answer please vote!

  5. #5
    Touch Premium Member pkellner's Avatar
    Join Date
    Sep 2008
    Location
    San Jose, California
    Posts
    802
    Vote Rating
    23
    pkellner will become famous soon enough pkellner will become famous soon enough

      0  

    Default


    I'm not seeing the "linked" field.

    I do have this above: initialPassField: 'password',

Thread Participants: 1