PDA

View Full Version : Can't validate form



IAmAndre
27 Mar 2014, 4:25 PM
Hi,

I started learning EXT JS a few days ago, and I'm having issues validating the following form. I'm currently just running tests on the "password" field. The submit button is always active, and when I try to check if the form is valid, well it seems to be considered as such. Here is a snippet of my code :


var form = Ext.create('Ext.form.Panel',{
layout: 'vbox',
// title: 'Login',
width: 300,
height: 100,
defaults: {
labelStyle: 'padding:7 0 0 25;',
},
items: [{
xtype: 'field',
name: 'Username',
fieldLabel: 'Username',
value: 'Your Username',
fieldStyle: 'font-style: italic; margin-top: 7;',
// vtype: 'alpha',
listeners: {
focus: function(){
if(this.value == 'Your Username'){
this.setValue('');
this.setFieldStyle('font-style: normal;');
}
},
blur: function(){
if(this.value == ''){
this.setFieldStyle('font-style: italic;');
this.setValue('Your Username');
}
}
},
/* validate: function(value){
var valid = (value.length>2);
alert(value);
return valid? true : 'The username must have at least 3 characters';
}*/
},
{
xtype: 'text',
value: 'The username must have at least 3 characters',
style: 'font-color:red;'
},
{
xtype: 'field',
fieldLabel: 'Password',
name: 'Password',
value: '',
// inputType: 'password',
// allowBlank: false,
minLength:5,
/* validator : function(){
alert('ttt');
return false;
},
validateOnChange: true*/
listeners:{
focus : function(){
alert(this.isValid());
}
}
}],
buttons: [{
text: 'Submit',
margin: '0 100 0 0',
formBind: true,
// disabled: true,
handler: function(){
alert('submitted');
}
}]
});

I don't know what I'm missing.
Thanks in advance for your help.

IAmAndre
27 Mar 2014, 5:00 PM
So after one and a half hour of debugging, I found that the issue was just the xtype : it should be set to "textfield" instead of "field".

Gary Schlosberg
28 Mar 2014, 5:55 AM
Glad you figured it out, and thanks for posting a followup for the community.