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

[pkellner]

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?

 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'
                }
            ]

[ssamayoa]

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

[pkellner]

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

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

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


});

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


});

[ssamayoa]

Try setting initialPassField in the linked field.

Regards.

[pkellner]

I'm not seeing the "linked" field.

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