PDA

View Full Version : validating textfield in form



akvasan
24 Feb 2014, 7:32 AM
Hi,

i need some clarifications in validating a fields in a form.

consider i have four textfields in a panel, if a enter a value in any field it should enable a button and disable if no value in textfield.

now i have entered a value in one textfield,button is enabled, now entering value in next field button will be enabled, problem starts here if i remove value in second textfield my button gets disabled.

how to solve this??

do any have solution for this

Gary Schlosberg
24 Feb 2014, 9:17 AM
The example on this docs page seems to work as you need:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.Panel

If not, do you have an example which illustrates the problem you are experiencing? Also, which version of ExtJS are you using?

venkatesh teja
24 Feb 2014, 10:32 PM
Hello...

For validating textfield in a ExtJs form we have a method called validator().
In this method we can write logic for disabling or enabling button as you want.

See below example for reference :

Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false,
validator:function(value){
if(value == ''){
//Disable button
return 'This field is mandatory ';
}else{
//Enable button
return value;
}
}
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // requires value to be a valid email address format
}]
});

akvasan
25 Feb 2014, 1:22 AM
Hi

here is my sample code

var createPanel = function(data) {
var text=data.values;
searchform = Ext.create('Ext.form.Panel', {
frame:true,
title: 'Enter any one of the below search fields',
buttonAlign : 'center',
bodyStyle: 'padding:5px 5px 0',
layout: 'column',
height:150,
defaultType: 'textfield',
validateOnChange:true,
fieldDefaults: {
msgTarget: 'side'
},

defaults: {
anchor: '100%'
},
listeners: {
validitychange:{
element: 'el', //bind to the underlying el property on the panel
fn: function( isValid){
Ext.MessageBox.alert('status',isValid);
console.log(isValid)
}
}
},

items:text, //dynamic value from database

renderTo : 'status-portal',
buttons: [ {
text: 'Search',
id:'button',
formBind : true,
disabled : true,
handler : function() {

.......

}
}]


i am not able to reach validitychange method if a make entry in any textfield.