View Full Version : Custom form validation

29 Jun 2010, 2:01 AM

I have the following form panel (see attached image), with 2 fieldsets:

I would like to validate the field(s) of one fieldset only if it is checked. The problem is if I specify allowBlank: false or fill a field with a wrong value, it will be marked as invalid even if the fieldset is unchecked.
Is there a way to skip/stop the validation process if the checkbox is unchecked ?

I know I can access the checkbox state with:


Thanks for your aswers,
Best regards

29 Jun 2010, 2:03 AM
Try disabling/enabling the fields on uncheck/check.

29 Jun 2010, 2:31 AM
Very good idea ! I didn't think of that solution !
Can I directly add a listener to the check event ? Or should I have to create a dedicated event ?

29 Jun 2010, 2:36 AM
You can just add a DOM listener to Ext.getCmp('myfieldset').checkbox.dom

After it has rendered of course.

I recommend the following overide:

Ext.override(Ext.form.FieldSet, {
* This function is called by the fieldset's checkbox when it is toggled (only applies when
* checkboxToggle = true). This method should never be called externally, but can be
* overridden to provide custom behavior when the checkbox is toggled if needed.
onCheckClick : function(){
if (this.fireEvent('checkchange', this.checkbox.dom.checked) !== false) {
this[this.checkbox.dom.checked ? 'expand' : 'collapse']();

Then you can listen for a checkchange event on the Fieldset, and inhibit collapse/expand behaviour if you want by returning false.

29 Jun 2010, 5:29 AM
Thanks for your answer.
But it seems that disabling the fieldset does not disable the field validation. For example, if I keep the allowBlank:false on the first fieldset, I disable this fieldset then I submit the form, I still have the invalid marker next to the field (see picture).


Does disabling a fieldset not disabled the field validation ?
Should I have to disable each field ? Or will it have no effect ? (I will try anyway...)

29 Jun 2010, 6:58 AM

I think they should be exempt from marking invalid. In fact I remember a Feature Request thread about this.

29 Jun 2010, 7:00 AM
Yes, here: http://www.sencha.com/forum/showthread.php?73113-DISCUSS-For-consistency-disabling-a-field-should-clearInvalid

29 Jun 2010, 7:18 AM
Animal, You were right !
By disabling each field instead of the fieldset, now it's working.
Thanks for your kind help !

29 Jun 2010, 7:23 AM
OK, that's why it works in my app.

I changed Container to cascade the setDisabled(true/false) call all the way down:

Ext.override(Ext.Container, {
setDisabled: function(disabled, overrideInitial) {
for (var f, i = 0, it = this.items ? this.items.items : [], l = it.length; i < l; i++) {
if ((typeof (f = it[i]).initialConfig.disabled !== 'boolean') || overrideInitial) {
if (f instanceof Ext.Container) {
f.setDisabled(disabled, overrideInitial);
} else {
if (disabled) {
} else {

29 Jun 2010, 7:51 AM
Does that mean that if I disable the 'parent' fieldset, it will disable all items included in it ?

29 Jun 2010, 7:55 AM
Calling setDisabled(true) will do that. As you can see from reading the code above.

29 Jun 2010, 7:59 AM
OK. Thanks again !

28 Jul 2010, 8:40 AM
Is there a way to force validation on disabled fields?

28 Jul 2010, 9:01 AM
Why would you want to validate a disabled field?

28 Jul 2010, 9:07 AM
I have a sort of "lookup" field which puts values into two fields which I dont want to be editable. I want to validate those locked fields before the create event to add this entry to the grid. Is there a better way to do this?

28 Jul 2010, 9:27 AM
I guess one trick is to just enable right before the create event then disable right after. Achieves the same effect.