PDA

View Full Version : [SOLVED] Password Vtype Verification



senacle
1 Sep 2017, 6:09 AM
I want to put in a form a first password field and a second password field.
The second password field must match the first :).

I didn't find in Architect the property for the second field, something like : initialPassField, to refer to the first field to check match.

In the Kitchen sink example http://examples.sencha.com/extjs/6.5.1/examples/kitchensink/?classic#form-advtypes, there's the property initialPassField, but it doesn't appear in the doc.

Seem's to be the same for cross date validation.

nclemeur
3 Sep 2017, 6:04 PM
I want to put in a form a first password field and a second password field.
The second password field must match the first :).

I didn't find in Architect the property for the second field, something like : initialPassField, to refer to the first field to check match.

In the Kitchen sink example http://examples.sencha.com/extjs/6.5.1/examples/kitchensink/?classic#form-advtypes, there's the property initialPassField, but it doesn't appear in the doc.

Seem's to be the same for cross date validation.

The password field matching in the kitchensink is implemented using an overrides on Ext.form.field.VTypes (see VType tab on left), so it is not a extjs feature but a custom implementation. You can use a processConfig to add the same properties and also create your own override for VTypes.

Having said that, I wish this would be a standard ExtJS feature.

Cheers
Nicolas

senacle
12 Sep 2017, 4:08 AM
You can create your own override for VTypes.

OK, i use this solution.

Something like :


registerVtypes: function() {
Ext.apply(Ext.form.field.VTypes, {
passwordCheck : function(val) {
var reg = /^.*(?=.{8,16})(?=.*\d)(?=.*[a-zA-Z]).*$/;
return reg.test(val);
},
passwordCheckText : 'some advices for fill in password.',
passwordMatch: function(value,field) {
var password = field.up('form').down('#' + 'firstPassword');
return (value == password.getValue());
},
passwordMatchText: 'Passwords doesn't match'
});
}

And in the form :


{
xtype: 'textfield',
anchor: '100%',
reference: 'password_field',
itemId: 'firstPassword',
margin: '0 0 20 0',
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
allowBlank: false,
vtype: 'passwordCheck'
},
{
xtype: 'textfield',
anchor: '100%',
fieldLabel: 'Password (confirm)',
validation: false,
inputType: 'password',
allowBlank: false,
vtype: 'passwordMatch'
}