PDA

View Full Version : [Solved]Conditional field validation



siebe vos
13 Dec 2010, 3:03 PM
I have a form with two fields (see screenshot). A validate checkbox and a code field. When checkbox is checked (true) the code field must be filled (not blank), if unchecked no checks on the field should be done. The codeAllowBlank function is only called when the field is filled. When I add allowBlank: false to the code field config the codeAllowBlank is executed also when the field is empty, but then the allowBlankText error appears. I am sure I am doing something wrong or solved the problem in the wrong way.

23792

Can someone help me out?

Change!: I found this post: http://www.sencha.com/forum/showthread.php?95964-CLOSED-814-3.2-allowblank-not-allowing-empty-field-(if-other-validation-required)/page2&highlight=getErrors

which made clear to me that because of the validation order no vtype validation is done when allowBlank = true. I chose to use the validator property instead to achieve the same functionality and not to override the textfield getErrors method. So now I changed my code into see item #2. This issue is solved.


Thanks in advance!

Hereby the code:

testvalidation.html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css"
/>
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="/extjs/ext-all-debug.js">
</script>
<title>
Test tabpanel layout
</title>
<script type="text/javascript" src="validationform.js">
</script>
<script type="text/javascript" src="validationwindow.js">
</script>
<!-- this is the main line-->
<script type="text/javascript">
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'under';
Ext.onReady(function() {
var testWindow = new Test.window.ValidationTestWindow({});
testWindow.show();
});
</script>
</head>

<body>
</body>
</html>


validationwindow.js:


Ext.ns('Test.window');
Test.window.ValidationTestWindow = Ext.extend(Ext.Window, function validationTestWindow() {
return {
height: 335,
width: 825,
modal: true,
layout: 'fit',
width: (Ext.isIE) ? 620 : 590,
height: (Ext.isIE) ? 255 : 245,
draggable: true,
center: true,
closable: true,
maximizable: true,
autoFocus: true,
closeAction: 'hide',
initComponent: function () {
this.items = this.buildWindowItems();
Test.window.ValidationTestWindow.superclass.initComponent.call(this);
},
buildWindowItems: function () {
return [{
width: 600,
height: 350,
xtype: 'tsvalidationform',
title: 'Validation form'
}]
}
}
}());


validationform.js:



Ext.ns('Test.form');

Test.form.ValidationForm = Ext.extend(Ext.form.FormPanel, function validationForm() {
return {
initComponent: function () {
this.items = this.buildFormItems();
Test.form.ValidationForm.superclass.initComponent.call(this);
},
buildFormItems: function () {
return [{
xtype: 'checkbox',
boxLabel: '',
fieldLabel: 'Validate code?',
name: 'validateFlag'
}, {
xtype: 'textfield',
fieldLabel: 'Code',
name: 'code',
vtype: 'codeAllowBlank'
}];
},
getFieldByName: function (fieldName) {
result = false;
Ext.each(this.getFormFields(), function (field) {
if (Ext.util.Format.lowercase(field.name) == Ext.util.Format.lowercase(fieldName)) {
result = field;
field = false;
};
});
if (!result) {
throw ('Application error: the fieldname :' + fieldName + ' is not defined on this screen, see function getFieldByName');
} else {
return result;
}
},
getFormFields: function () {
return this.getForm().items.items;
}
}
}());

Ext.reg('tsvalidationform', Test.form.ValidationForm);

Ext.apply(Ext.form.VTypes, {
codeAllowBlank: function (val, field) {
var form = field.findParentByType('tsvalidationform', false);
if (form.getFieldByName('validateFlag').getValue()) {
if (Ext.isEmpty(val)) {
return false;
} else {
return true;
}
} else {
return true;
}
},
codeAllowBlankText: 'Code field should be filled'
});

siebe vos
14 Dec 2010, 12:32 PM
Hereby the new validationform.js code (red code is modified)



Ext.ns('Test.form');

Test.form.ValidationForm = Ext.extend(Ext.form.FormPanel, function validationForm() {
return {
initComponent: function () {
this.items = this.buildFormItems();
Test.form.ValidationForm.superclass.initComponent.call(this);
},
buildFormItems: function () {
return [{
xtype: 'checkbox',
boxLabel: '',
fieldLabel: 'Validate code?',
name: 'validateFlag'
}, {
xtype: 'textfield',
fieldLabel: 'Code',
name: 'code',
validator: this.codeAllowBlank
//vtype: 'codeAllowBlank'
}];
},
getFieldByName: function (fieldName) {
result = false;
Ext.each(this.getFormFields(), function (field) {
if (Ext.util.Format.lowercase(field.name) == Ext.util.Format.lowercase(fieldName)) {
result = field;
field = false;
};
});
if (!result) {
throw ('Application error: the fieldname :' + fieldName + ' is not defined on this screen, see function getFieldByName');
} else {
return result;
}
},
getFormFields: function () {
return this.getForm().items.items;
},
codeAllowBlank: function (val) {
var form = this.findParentByType('tsvalidationform', false);
if (form.getFieldByName('validateFlag').getValue()) {
if (Ext.isEmpty(val)) {
return 'This field must be filled because of the validation switch!';
} else {
return true;
}
} else {
return true;
}
}
}
}());
Ext.reg('tsvalidationform', Test.form.ValidationForm);

pulkitagarwal
30 Dec 2010, 2:14 AM
I am debugging and provide with the my code :)